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在 万 维 网 (WWW) 上 ， 一 个 超 媒 体 文档 称 为 一 个 页 面 (Page)， 一 个 组 织 或 者 个 人 在 万 维 
网 上 放置 开始 点 的 页 面 称 为 主页 或 首页 (Homepage)。 主 页 中 通常 包含 有 指向 其 他 相关 页 面 
或 节点 的 超级 链接 (指针 )。 所 谓 超级 链接 ， 就 是 一 种 统一 资源 定位 器 (Uniform Resource 
Locator，URL) 指 针 ， 通 过 激活 ( 单 击 ) 它 ， 可 以 方便 地 获取 新 的 网 页 ， 这 也 是 超 文 本 标记 语 
言 (8TML) 获 得 广泛 应 用 的 最 重要 的 原因 之 一 。 在 逻辑 上 将 视 为 一 个 整体 的 一 系列 页 面 的 
有 机 集合 称 为 网 站 (Website 或 Site)。HTML 是 为 创建 网 页 和 其 他 可 在 网 页 浏览 器 中 看 到 的 
信息 而 设计 的 一 种 标记 语言 。 本 书 全 面 揭示 了 HTML 和 层级 样式 表 (CSS) 的 秘密 ， 掌 握 了 
这 些 秘 诀 ， 就 可 以 创建 专业 级 的 交互 式 网 页 和 强大 的 应 用 程序 ， 并 能 用 各 种 方式 随心 所 欲 
地 与 Web 进行 交互 。 

本 书 是 “工信部 国家 级 计算 机 人 才 评 定 体系 ”中 的 一 本 专业 教材 。“ 工 信 部 国家 级 计 
算 机 人 才 评 定 体系 ”是 由 武汉 厚 溥 教育 科技 有 限 公 司 开发 ， 以 培养 符合 企业 需求 的 软件 工 
程 师 为 目标 的 IT 职业 教育 体系 。 在 开发 该 体系 之 前 ， 我 们 对 IT 行业 的 岗位 序列 做 了 充分 
的 调研 ， 包 括 研究 从 业 人 员 技术 方向 、 项 目 经 验 和 职业 素质 等 方面 的 需求 ， 通 过 对 所 面向 
学 生 的 特点 、 行 业 需 求 的 现状 以 及 实施 等 方面 的 详细 分 析 ， 结 合 我 公司 对 软件 人 才 培 养 模 
式 的 认 知 ， 按 照 软件 专业 总 体 定位 要 求 ， 进 行 软件 专业 产品 课程 体系 设计 。 该 体系 集 应 用 
软件 知识 和 多 领域 的 实践 项 目 于 一 体 ， 着 重 培养 学 生 的 熟练 度 、 规 范 性 、 集 成 和 项 目 能 力 ， 
从 而 达到 预定 的 培养 目标 。 

本 书 共 包括 9 个 单元 : 认识 HIMLS 及 开发 工具 介绍 、HTML 中 表格 和 表单 的 应 用 、 
应 用 CSS 样式 美化 网 页 、 基 于 DIV+CSS 的 网 页 布局 与 定位 、 应 用 CSS 布局 网 页 和 HTML 
列表 、 应 用 CSS 设置 链接 和 导航 菜单 、HTML 中 框架 的 应 用 、 应 用 DIV+CSS 设计 商业 网 
站 (PC 端 )、 应 用 DIV+CSS 设计 商业 网 站 (移动 端 )。 

我 们 对 本 书 的 编写 体系 做 了 精心 的 设计 ， 按 照 “ 理 论 学 习 一 知识 总 结 一 上 机 操作 一 课 
后 习题 ”这 一 思路 进行 编排 。“ 理 论 学 习 ” 部 分 描述 通过 案例 所 要 达到 的 学 习 目 标 与 涉及 
的 相关 知识 点 ， 使 学 习 目 标 更 加 明确 ; “知识 总 结 ” 部 分 概括 案例 所 涉及 的 知识 点 ， 使 知 
识 点 完整 系统 地 呈现 ，“ 上 机 操作 ”部 分 对 案例 进行 了 详尽 分 析 ， 通 过 完整 的 步 又 帮助 读 
者 快速 掌握 该 案例 的 操作 方法 ，“ 课 后 习题 ”部 分 帮助 读者 理解 章节 的 知识 点 。 本 书 在 内 
容 编写 方面 ， 力 求 细致 全 面 ; 在 文字 叙述 方面 ， 注 意 言 简 意 赎 、 重 点 突出 ; 在 案例 选取 方 






































使 用 HTML 设 计 商 业 网 站 


面 ， 强 调 案例 的 针对 性 和 实用 性 。 

本 书 凝聚 了 编者 多 年 来 的 教学 经 验 和 成 果 ， 可 作为 各 类 高 等 院 校 、 高 职高 专 及 培训 机 
构 的 教材 ， 也 可 供 广大 程序 设计 人 员 人 参考。 
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他 户 笛 人 

我 们 在 网 上 冲浪 时 ， 会 欣赏 到 很 多 制作 精美 的 网 页 ， 在 美 慕 的 同时 ， 你 想 亲手 制作 网 
页 吗 ? 你 想 让 自己 制作 的 网 页 功能 更 强大 吗 ? 

HTML(HyperText Markup Language, 超 文 本 标记 语言 ) 就 是 制作 这 些 精美 网 页 的 基本 语 
言 。 所 谓 超 文本 , 是 因为 它 可 以 加 入 图 片 、 声 音 、 动 画 、 影视 等 内 容 。 事实 上 , 每 一 个 HTML 
文档 都 是 一 个 静态 的 网 页 文件 ,这 个 文件 里 包含 了 HTML 指令 代码 ， 这 些 指令 代码 并 不 是 
一 种 程序 语言 ， 它 只 是 一 种 排版 网 页 中 资料 显示 位 置 的 标记 结构 语言 ， 易 学 易 懂 ， 非 常 简 
单 。HTML 的 普遍 应 用 带 来 了 超 文本 的 技术 一 一 通过 单 击 从 一 个 主题 跳 转 到 另 一 个 主题 ， 
从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 与 世界 各 地 主机 中 的 文件 链接 。 

HTML 是 一 种 应 用 于 网 页 文档 (文件 ) 的 标记 语言 , 用 它 编写 的 文件 的 扩展 名 是 “.html” 
或 “htm”， 可 以 使 用 下 等 浏览 器 将 其 打开 。HTML 并 没有 严格 的 计算 机 语法 结构 ， 因 此 
HTML 语言 其 实 只 是 一 种 标识 符 ， 即 HTML 文件 是 由 HTML 标记 符号 系统 组 成 的 代码 
集合 。 

HBuilder 则 是 一 款 专业 的 网 页 编辑 工具 ， 利 用 它 可 以 设计 网 页 、 开 发 网 站 ， 并 可 编辑 
Web 应 用 程序 。 


1.1 HTML5 概述 


1.1.1 HTML5 发 展 历史 


1. Internet 简介 


世界 各 地 的 个 人 计算 机 、 小 型 机 、 中 型 机 、 大 型 机 和 专用 服务 器 连接 在 一 起 ， 形 成 无 
数 个 局 域 网 。 以 此 为 基础 ， 无 数 个 局 域 网 互相 连接 在 一 起 ， 成 为 一 个 全 球 性 的 、 统 一 的 网 
络 ， 这 就 是 Internet。 

Internet 中 的 WWW 网 ， 也 称 为 “环球 信息 网 ”或 “万 维 网 ”， 人 们 也 常 简称 为 3W， 
外 国人 称 它 为 W3 或 Web， 它 是 在 因特网 上 检索 和 浏览 超 媒体 信息 的 一 种 信息 查询 工具 。 
所 谓 超 媒体 信息 ， 是 指 超 文本 和 多 媒体 信息 的 结合 ， 即 文本 、 声 音 、 图 像 、 动 画 、 视 频 等 
信息 。 

WWW 服务 器 都 安装 TCP/IP 协议 , 服务 器 上 的 所 有 信息 都 用 HTML( 超 文本 标记 语言 
来 描述 ， 其 文档 由 文本 、 格 式 化 代码 以 及 与 其 他 文档 的 链接 组 成 。 其 中 超 媒 体 链接 使 用 的 
是 URL( 统 一 资源 定位 器 ), URL 用 来 定位 检索 WWW 上 任何 地 方 的 信息 资源 。 当 用 户 在 浏 
览 器 内 输入 网 址 后 , 经 过 WWW 服务 器 计算 ， 网 页 的 内 容 会 被 传送 到 用 户 的 计算 机 内 ， 由 
浏览 器 将 这 些 内 容 翻译 成 图 文 并 茂 的 网 页 。URL 的 第 一 部 分 一 般 为 “http:/”， 表 示 超 文 
本 传送 协议 ， 它 支持 超 媒 体 信息 的 传送 方式 。URL 的 第 一 部 分 也 可 以 是 FTP、WAIS、 
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Gopher、 Telnet、BBS、News、E-mail、Whois 等 协议 。 

在 WWW 网 上 ， 我 们 可 以 立即 把 全 球 任何 一 个 WWW 服务 器 上 的 信息 调 过 来 ， 可 以 
浏览 到 文本 、 图 像 、 声 音 、 动 画 等 信息 ， 不 仅 图 文 并 茂 ， 而 且 具 有 非常 友好 的 用 户 操作 界 
面 和 查询 方式 。 在 WWW 网 上 ， 用 户 操作 也 相当 简单 ， 只 要 会 使 用 鼠标 即 可 浏览 ， 甚 至 用 
鼠标 单 击 一 下 就 可 以 把 所 需 的 软件 、 文 本 、 图 像 、 声 音 、 动 画 、 视 频 等 信息 下 载 到 自己 的 
计算 机 上 。 

正 是 由 于 有 了 万 维 网 和 超 链 接 技 术 ， 我 们 才能 轻 击 鼠标 便 可 连接 到 全 世界 任何 一 台 万 
维 网 主机 ， 从 而 浏览 和 获取 无 穷 无 尽 的 信息 资源 。 正 因 如 此 ，Internet 才 变 得 如 此 神奇 。 


2. HTML 


19 世纪 70 年 代 ， 美 国 哈佛 大 学 的 学 生 TedNelson 提出 了 一 个 极 富 创造 性 的 构想 : 在 
全 球 建立 一 个 信息 网 ， 在 这 个 信息 网 上 用 户 可 以 任意 地 选择 其 想 要 访问 的 信息 资源 ， 而 不 
用 关心 这 些 信息 的 来 源 。 为 此 ， 他 还 创建 了 一 个 术语 一 超 文本 。 超 文本 具有 极 强 的 交互 
能 力 ， 用 户 只 需 单 击 文本 中 的 字 或 词组 ， 便 可 激发 与 其 语意 相关 的 新 的 信息 流 。 因 为 超 文 
本 中 的 许多 字 或 词 都 具有 一 个 链接 将 其 指向 另 一 个 文本 ， 而 后 仍 有 链接 指向 下 一 个 文本 ， 
所 以 只 凭借 词义 或 语意 的 关系 即 可 供 人 们 任意 浏览 。 

这 是 一 个 迈 向 新 技术 挑战 的 构想 ， 是 人 类 向 信息 社会 迈进 时 梦 襟 以 求 的 目标 。 当 年 的 
构想 随 着 世界 计算 机 技术 的 飞速 发 展 ， 如 今 已 成 为 现实 。 

HTML 经 过 几 十 年 的 发 展 , 从 最 初 1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 工 作 草 
案 发 布 (该 草案 不 是 标准 版 )， 经 历 了 HTML2.0 版 本 、HTML3.2 版 本 、HTML4.0 版 本 、 
HTML4.01 版 本 ， 一 直到 2014 年 10 月 28 日 W3C 推荐 的 标准 版 HTMLS 的 发 布 ， 经 过 许 
多 人 的 努力 ，HTML 一 直 在 悄悄 地 改变 着 我 们 的 生活 ， 丰 富 着 我 们 的 生活 。 到 目前 为 止 ， 
HTML 已 经 发 展 为 比较 成 熟 的 HTML5， 在 这 个 版 本 中 ， 提 供 了 一 些 新 的 元 素 和 一 些 有 趣 
的 新 特性 ， 同 时 也 建立 了 一 些 新 的 规则 。 这 些 元 素 、 特 性 和 规则 的 建立 ， 提 供 了 许多 新 的 
网 页 功能 ， 如 使 用 网 页 实现 动态 泻 染 图 形 、 图 表 、 图 像 和 动画 ， 以 及 不 需要 安装 任何 插件 
直接 使 用 网 页 播放 视频 等 。 该 版 本 规范 更 加 完善 ， 浏 览 器 之 间 的 兼容 性 也 更 加 完美 。 企 业 
开发 也 在 加 大 对 HTMLS5 的 使 用 。 


1.1.2 HTML5 新 特性 


HTML5 和 以 往 版 本 相 比 ， 新 增 了 一 些 有 趣 的 特性 ， 这 些 特性 使 HTML 页 面 功能 更 加 
强大 ， 页 面 内 容 更 加 丰富 。 比 如 新 的 DocType; 用 于 绘画 的 canvas 元 素 ; 用 于 媒介 回放 的 
video 和 audio 元 素 ; 新 的 表单 控件 ， 如 calendar、date、time、email、url、search; 新 的 特 
殊 内 容 元 素 ， 如 nav、section、footer 等 。 这 些 新 的 特性 ， 大 家 会 陆续 在 后 续 章 节 中 了 
解 到 。 
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1.1.3 HTML5 组 织 


HTMLS5 的 开发 主要 由 下 面 三 个 组 织 负责 和 实施 。 

WHATWG: HTML 标准 自 1999 年 12 月 发 布 HIML4.01 版 本 后 ， 后 继 的 HTMLS5 以 
及 其 他 版 本 被 束之高阁 。 为 了 推动 Web 标准 化 的 形成 ， 由 来 自 Apple、Mozilla、Google 
和 Opera 等 浏览 器 厂商 的 人 员 成 立 了 一 个 叫 Web Hypertext Application Technology Working 
Group(Web 超 文本 应 用 技术 工作 组 ，WHATWG) 的 组 织 ， 该 组 织 致 力 于 Web 表单 和 APP 
的 开发 ， 同 时 为 各 浏览 器 厂商 以 及 其 他 有 意向 的 组 织 提供 开放 式 合作 。 

W3C: W3C(World Wide Web Consortium， 万 维 网 联盟 ) 下 辖 的 HTML 工作 组 ,该 机 构 
成 立 于 1994 年 10 月 份 , 在 麻 省 理工 学 院 计算 机 科学 实验 室 成 立 , 是 Web 技术 领域 最 具有 
权威 和 影响 力 的 国际 中 立 性 技术 标准 机 构 ， 对 互联 网 技术 的 发 展 和 应 用 起 到 了 基础 性 和 根 
本 性 的 支撑 作用 ， 目 前 主要 负责 发 布 HTMLS5 规范 。 

IETF: IETF( 因 特 网 工程 任务 组 )， 这 个 任务 组 下 辖 HTTP 等 ， 是 负责 开发 Internet 协 
议 的 团队 ，HTMLS 定义 的 一 种 新 API(WebSocket APD 所 依赖 的 WebSocket 协议 ， 就 是 由 
该 组 织 负责 开发 的 。 


1.1.4 HTML5 构成 


随 着 互联 网 的 快速 发 展 , HTML 也 在 迅速 更 新 换代 , HTML5 更 是 越 来 越 让 人 们 在 Web 
端的 体验 达到 了 一 个 新 的 高 度 ，HTML5 主要 包括 以 下 功能 : 

(1) HIMLS 中 出 现 新 的 <canvas> 标 记 ， 不 仅 提 供 Flash 相关 的 功能 ， 而 且 加 载 网 站 视 
频 的 速度 大 幅 上 升 ， 用 户 等 待 时 间 大 大 降低 。 

(2) HTML5 中 出 现 新 的 <header> 和 <footer> 标 记 ， 更 加 明晰 了 网 站 的 结构 ， 可 以 更 快速 
地 定位 到 这 些 位 置 ， 加 大 访问 力度 。 

(3) HTMLS 中 出 现 本 地 数据 这 项 功能 ， 本 功能 加 速 了 交互 搜索 、 缓 存 以 及 索引 功能 。 

(4) HTML5 中 加 入 全 新 的 表单 元 素 ， 更 方便 我 们 管理 网 页 等 。 

这 些 功能 大 大 提高 了 可 用 性 和 用 户 的 体验 性 ， 并 且 一 些 新 增 的 标签 有 助 于 开发 人 员 去 
定义 一 些 重要 的 内 容 ， 给 站 点 也 带 来 了 更 多 的 多 媒体 元 素 ( 比 如 一 些 音频 和 视频 )， 使 网 页 
的 可 移植 性 也 更 好 ， 这 正如 万 维 网 联盟 的 首席 执行 官 Jeff Jaffe 博士 所 说 : HTMLS 将 推动 
Web 进入 新 的 时 代 。 不 久 以 前 ，Web 还 只 是 在 网 上 看 一 些 基础 的 文档 ， 而 目前 ，Web 是 一 
个 极 大 丰富 的 平台 。 我 们 已 经 进入 一 个 稳定 阶段 ， 每 个 人 都 可 以 按照 标准 行事 ， 并 且 可 用 
于 所 有 浏览 器 。 


1.2 ”第 一 个 入门 网 页 


HTML 文档 均 用 于 在 浏览 器 上 显示 , 而 支持 HITP 的 浏览 器 均 为 Windows 式 的 图 形 用 
户 接口 (GUD 界 面 ， 因 此 ，HTML 文档 的 基本 结构 是 依据 这 一 要 求 而 设 定 的 。 一 个 GUI 的 
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视窗 通常 由 标题 栏 和 窗口 体 作为 其 最 基本 的 构成 ， 而 HTML 文档 结构 的 “ 头 ” 和 “ 体 ” 正 
应 于 这 一 要 求 。 

对 于 刚刚 接触 超 文 本 的 朋友 ， 遇 到 的 最 大 障碍 就 是 一 些 用 “<” 和 “>” 括 起 来 的 句子 ， 
我 们 称 它 为 标签 ， 用 于 分 隔 和 标识 文本 的 元 素 ， 以 形成 文本 的 布局 、 格 式 及 五 彩 缤纷 的 画 
面 。 标 签 通过 指定 某 块 信息 为 段落 或 标题 等 来 标识 文档 的 某 个 部 件 ， 属 性 是 标签 里 的 参数 
的 选项 。HTML 的 标签 分 为 成 对 标签 和 单独 标签 两 种 : 成 对 标签 由 首 标签 < 标签 名 > 和 尾 标 
签 </ 标 签名 > 组 成 ， 成 对 标签 的 作用 域 只 作用 于 这 对 标签 中 的 文档 ; 单独 标签 的 格式 为 < 标 
签名 >， 单 独 标签 在 相应 的 位 置 插入 元 素 即 可 。 

大 多 数 标签 都 有 自己 的 一 些 属 性 ， 属 性 要 写 在 首 标签 内 ， 属 性 用 于 进一步 改变 显示 的 
效果 ,各 属性 之 间 无 先后 次 序 ， 属 性 是 可 选 的 ， 属 性 也 可 以 省 略 而 采用 默认 值 。 其 格式 
如 下 : 

< 标签 名 属性 = 属性 值 1 属性 2= 属 性 值 2 .… > 

标签 、 属 性 不 区 分 大 小 写 。 

我 们 把 HTML 的 各 种 标记 符 放 在 “< > ”内 ， 例 如 <html>， 表 示 该 文档 为 HTML 文档 ; 
<html> 需 要 一 个 结束 标签 ， 即 </html>， 代 表 该 HTML 文档 的 结束 。 在 <html> 和 </html> 之 
间 再 放 入 各 种 标签 ， 如 <head> 标 签 、<body> 标 签 等 ， 这 样 就 组 成 了 网 页 。 


1.2.1 头 部 <head>...</head> 


大 家 都 学 过 英语 ， 一 定 知道 “ 头 ” 的 英文 单词 是 什么 。head， 没 错 ， 在 HTML 里 , 我 
们 也 是 用 head 来 表示 文档 的 头 部 ， 即 <head>…</head>。 

<head> 标 签 对 中 可 以 包含 文档 的 标题 、 文 档 使 用 的 脚本 、 样 式 定义 和 文档 名 信息 。 浏 
览 器 希望 从 头 部 找到 文档 的 补充 信息 。 此 外 ，<head> 标 签 对 中 还 可 以 包含 搜索 工具 和 索引 
程序 所 需 的 其 他 信息 的 标识 。 头 部 位 于 <html> 和 </html> 之 间 。 


前 / 注 高 , 
| ”标签 对 是 一 层 一 层 吝 套 的 ， 各 个 标 答对 不 能 交叉 放置 。 对 于 标准 HTML 来 说 , 最 |! 
外 面 一 层 是 <html> 和 </html> 标 答对 ， 其 他 标签 对 应 放 在 它们 之 间 。 | 


| 
\ 


1.2.2 标题 <title>...</title> 


不 知道 大 家 有 没有 注意 到 浏览 器 窗口 最 上 边 显 示 的 文本 信息 ， 那 些 信息 一 般 是 网 页 的 
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“主题 ”。 它 通常 会 对 当前 网 页 做 一 个 整体 描述 ， 说 明 当 前 网 页 的 具体 内 容 。 眼 睛 是 心灵 
的 窗户 ， 对 于 一 个 网 页 来 说 ， 它 的 眼睛 就 是 网 页 标题 (如 图 1-1 所 示 )， 它 显示 在 网 页 标题 


栏 上 。 
标题 用 英语 怎么 说 呢 ? title, 对 了 .。 同 大 家 一 样 , 网 页 的 眼睛 也 是 长 在 头 部 的 。 在 <title> 
标签 对 内 部 放 入 你 想 要 看 到 的 文字 ， 这 样 我 们 就 能 随意 操纵 标题 栏 的 内 容 了 ， 如 下 所 示 : 


打开 记事 本 ， 写 入 上 面 的 代码 ， 另 存 为 hello.html， 然后 双击 这 个 网 页 文件 ， 即 可 看 到 


标题 栏 上 显示 的 正 是 我 们 写 在 <title> 标 签 中 的 内 容 ， 效 果 如 图 1-2 所 示 。 
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图 1-1 网 页 标题 视图 图 1-2 <title> 标 签 效果 图 


1.2.3 元 标签 <meta> 
在 <head> 标 签 对 内 部 还 可 以 嵌 套 另 一 个 重要 标签 : <meta>( 即 META 标签 或 元 标签 )。 
<meta> 标 签 用 来 描述 HTML 网 页 文档 的 属性 ， 例 如 作者 、 日 期 和 时 间 、 网 页 描述 、 关 键 


词 、 页 面 刷新 等 。 例 如 : 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
其 作用 是 指定 当前 文档 所 使 用 的 字符 编码 为 gp2312， 也 就 是 中 文 简体 字符 。 根 据 这 一 
行 代码 ， 浏览 器 就 可 以 识别 出 这 个 网 页 应 该 用 中 文 简体 字符 显示 。 类 似 地 ， 如 果 将 gb2312 
蔡 换 为 big5， 那 么 网 页 就 会 以 中 文 繁体 的 格式 解释 代码 并 显示 。 
顾名思义 ，http-equiv 相当 于 http 文件 的 头 ， 可 以 直接 影响 网 页 的 传输 ， 用 于 向 浏 
览 器 提供 一 些 说明 人 信息， 浏览 器 会 根据 这 些 说 明 做 出 相应 处 理 。 如 设置 页 面 刷新 为 : 


<meta http-equiv="refresh" content="60"> 
该 网 页 将 会 每 60 秒 钟 自动 刷新 一 次 。 
若 设置 页 面 在 一 分 钟 后 跳 转 到 搜狐 网 ， 则 为 : 


<meta http-equiv="refresh" content="60:;url=http://www.sohu.com"> 
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1.2.4 ”入 门 网 页 


通过 学 习 头 部 <head></head>， 标 题 <title></title> 以 及 元 标签 <meta>， 大 家 可 以 小 试 牛 
刀 ， 做 一 个 在 页 面 上 可 以 显示 “世界 ， 您 好 ! ! ! ”、 标 题 为 “hello world” 的 页 面 ， 并 
且 10 秒 后 可 以 跳 转 到 百度 主页 的 一 个 html 文件 。 
页 面 内 容 如 下 : 
<html><head> 
<meta charset="utf-8" http-equiv="refresh" content="10;url=http://www.baidu.com" /> 
<title>hello world</title> 
</head> 
<body> 
世界 ， 您 好 ! ! ! 
</body> 
</html> 
打开 记事 本 ， 写 入 上 面 代 码 ， 另 存 为 hello_world.html 文档 ， 然 后 通过 正 浏览 器 打开 
该 网 页 文件 ， 即 可 看 到 标题 拦 上 显示 的 正 是 我 们 写 在 <title> 标 签 中 的 内 容 ， 而 且 网 页 上 显 
示 的 是 “世界 ， 您 好 ! ! ! ”， 如 图 1-3 所 示 。 
然后 等 10 秒 钟 后 ， 页 面 会 跳 转 到 百度 主页 ， 如 图 1-4 所 示 。 
”和 芥 - 回 - 口 唤 ~ | 

















图 1-3 网 页 标题 和 内 容 视图 图 14 网 页 跳 转 到 百度 主页 


但 是 要 注意 : 需要 联网 ， 这 个 网 页 才 会 在 打开 10 秒 钟 后 跳 转 到 百度 主页 ， 否 则 会 提 
示 无 法 显示 该 页 面 ， 如 图 1-5 所 示 。 
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多 Internet Explorer 无 去 显示 该 网 页 


您 可 以 兰 试 以 下 操作 : 


LEE 


1-5 网络 未 连接 跳 转 主页 
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1.3 开发 工具 简介 


1.3.1 使 用 记事 本 编辑 器 


记事 本 在 Windows 操作 系统 中 是 一 个 小 应 用 程序 , 是 目前 应 用 非常 广泛 的 对 文字 进行 
记录 和 存储 的 软件 ， 自 从 1985 年 发 布 的 Windows 1.0 开始 , 所 有 的 微软 系统 都 会 内 置 这 个 
软件 ， 以 方便 人 们 去 记录 一 些 生活 、 工 作 或 者 学 习 上 的 内 容 。 因 为 记事 本 只 能 处 理 纯 文本 
文件 ， 而 多 种 格式 的 源 文件 都 是 纯 文本 的 ， 所 以 记事 本 也 成 了 目前 使 用 最 多 的 源 代码 编辑 
器 。 该 软件 具备 最 基本 的 文本 编辑 功能 ， 而 且 因 为 体积 较 小 、 启 动 速度 较 快 、 占 用 内 存 少 、 
非常 容易 使 用 , 所 以 一 般 都 会 作为 最 基本 的 文本 编辑 工具 ; 但 是 此 编辑 器 不 具备 编译 功能 ， 
所 以 仍 需 要 通过 其 他 外 部 程序 来 处 理 。 

选择 “开始 ”|“ 所 有 程序 ”|“ 附 件 ”|“ 记 事 本 ”命令 ， 即 可 打开 记事 本 进行 一 系列 
的 编辑 工作 了 。 

通过 这 种 方法 我 们 可 以 轻易 地 打开 一 个 新 建 的 记事 本 ， 操 作 非 常 简 单 。HTML 文件 的 
后 级 名 是 .html， 而 不 是 以 .txt 方式 来 命名 的 。 


1.3.2 ”使 用 EditPlus 编辑 器 


EditPlus 是 一 款 功 能 强大 的 文字 编辑 器 ， 支 持 多 种 语言 的 编辑 ， 是 由 韩国 Sangil Kim 
生产 出 来 的 一 款 可 处 理 文本 、HTML 和 程序 语言 的 超 强 功能 编辑 器 ， 主 要 具备 以 下 优势 

(1) 默认 支持 HTML、CSS、C/C++、Java 等 语法 的 高 亮 显示 。 

(2) 提供 了 与 Internet 的 无 颖 连接 ， 可 通过 该 软件 直接 打开 浏览 器 进行 浏览 。 

(3) 提供 了 多 个 工作 窗口 ， 可 同时 打开 多 个 文档 进行 操作 。 

(4) 可 通过 配置 直接 对 Java 程序 进行 编译 执行 操作 ， 等 等 。 

可 以 说 EditPlus 是 一 款 非常 适合 初步 学 习 HTML 编辑 的 编辑 器 , 该 编辑 器 的 界面 如 图 
1-6 所 示 。 














1-6 ”EditPlus 编辑 器 界面 


通过 该 编辑 器 可 进行 HTML 文件 的 编辑 工作 ， 选 择 “ 文 件 ”|“ 新 建 ”|“HTML 网 页 ” 
命令 ， 则 会 弹出 如 图 1-7 所 示 的 窗口 。 
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name="Generator"content="Editplus"> 


<head> 
<title> New Document </title> ] 
a 


6 </head> 

7 <body> 

B </body> 

9 </html> 加 








10 0 PC ANSI 


图 1-7 使 用 EditPlus 新 建 HTML 网 页 视图 


新 建 的 HTML 文件 已 经 包含 了 大 家 所 需要 的 头 信息 、 标 题 信 息 ， 以 及 <body>, 减少 了 
大 家 的 编辑 工作 。 


1.3.3 ”使 用 sublime 编辑 器 


Sublime Text 代码 编辑 器 是 由 一 个 叫 Jon Skinner 的 程序 员 于 2008 年 1 月 份 开发 出 来 
的 软件 ， 具 有 漂亮 的 用 户 界 面 和 强大 的 功能 ， 可 支持 拼写 检查 、 书 签 、 完 整 的 Python API、 
Goto 功能 ;而 且 它 还 是 一 个 跨 平台 的 编辑 器 ， 可 同时 支持 Windows、Linux、Mac OS X 等 
操作 系统 ， 被 很 多 用 户 所 熟悉 并 使 用 。 

Sublime Text 具有 编辑 状态 恢复 的 能 力 ， 如 果 对 一 个 文件 进行 了 修改 ， 但 没有 保存 ， 
当 退 出 时 ， 该 软件 不 会 询问 是 否 要 保存 ， 因 为 当下 次 重新 打开 该 软件 时 ， 会 自动 恢复 退出 
前 的 编辑 状态 。 

Sublime Text 具有 和 良好 的 扩展 功能 ， 支 持 多 行 选择 和 编辑 功能 ， 可 以 实时 搜索 到 相应 
的 命令 、 选 项 、snippet 和 syntex， 减 少 查 找 的 麻烦 ， 即 时 的 文件 切换 可 随意 跳 转 到 文件 的 
任意 位 置 。 

由 于 Sublime Text 具有 代码 高 亮 、 语 法 提示 、 自 动 完成 、 反 应 快速 的 功能 并 支持 扩展 ， 
因此 编辑 出 的 页 面 非常 漂亮 ， 相 比 于 其 他 编辑 器 ， 这 款 软件 在 体验 和 功能 上 毫 不 逊色 。 


1.3.4 使 用 Dreamweaver 编辑 器 


Adobe Dreamweaver 是 一 款 专 业 的 HIML 编辑 器 ， 用 于 设计 、 编 码 ， 开 发 网 站 、 网 页 
和 Web 应 用 程序 。 

利用 Dreamweaver 中 的 可 视 化 编辑 功能 ， 可 以 快速 地 创建 页 面 而 无 须 编写 任何 代码 ; 
可 以 查看 所 有 站 点 元 素 或 资源 并 将 它们 从 易于 使 用 的 面板 上 直接 拖 忠 到 文档 中 ; 可 以 在 
Fireworks 或 其 他 图 形 应 用 程序 中 创建 和 编辑 图 像 ， 然 后 将 它们 直接 导入 Dreamweaver， 或 
者 添加 Flash 对 象 ， 从 而 优化 开发 工作 流程 。 

Dreamweaver 还 提供 了 功能 全 面 的 编码 环境 , 其 中 包括 代码 编辑 工具 (例如 代码 颜色 和 
标签 完成 )， 有 关 HTML、 层 肢 样 式 表 (CSS)、JavaScript、ColdFusion 标记 语言 (CFML)、 
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Microsoft Active Server Pages(ASP) 和 Java Server Pages(JSP) 的 参考 资料 和 JavaScript 代码 的 
智能 提示 。Dreamweaver 可 自由 导入 导出 HTML, 可 导入 手工 编码 的 HTML 文档 而 不 会 重 
新 设置 代码 的 格式 ， 可 以 随后 用 首选 的 格式 设置 样式 来 重新 设置 代码 的 格式 。 

Dreamweaver 还 可 以 使 用 服务 器 技术 (例如 CFML、ASP.NET、ASP、JSP 和 PHP) 生 成 
由 动态 数据 库 支 持 的 Web 应 用 程序 。 

Dreamweaver 可 以 完全 自 定 义 。 可 以 创建 自己 的 对 象 和 命令 、 修 改 快捷 键 ， 甚 至 编写 
JavaScript 代码 ， 用 新 的 行为 、 属 性 检查 器 和 站 点 报告 来 扩展 Dreamweaver 的 功能 。 

总 而 言 之 ，Dreamweaver 几乎 可 以 满足 用 户 对 网 页 编辑 及 站 点 管理 所 需 的 各 种 功能 ， 
是 一 款 非常 专业 的 网 页 制作 工具 。 


1.4 HBuiLder 界面 介绍 


HBuilder 是 由 国内 最 大 的 无 线 中 间 件 厂商 、 移 动 办 公 解 决 方案 供应 商 及 国内 最 主要 的 
无 线 城市 解决 方案 供应 商 Dcloud( 数 字 天 堂 ) 专 为 前 端 打 造 的 开发 工具 ， 具 有 最 全 的 语法 库 
和 浏览 器 兼容 数据 ， 能 够 非常 方便 地 制作 手机 App; 并 且 为 了 大 家 的 眼睛 健康 ， 专 门 添加 
了 保护 眼睛 的 绿 柔 设计 ， 这 是 其 他 软件 尚 不 具备 的 ， 它 还 支持 HTML、CSS、JavaScript、 
PHP 的 快速 开发 ， 深 受 广大 前 端 开发 者 的 喜爱 。 下 面 我 们 来 重点 了 解 这 一 神奇 软件 。 

在 使 用 这 款 软件 的 时 候 我 们 会 有 非常 强烈 的 一 种 体验 , 那 就 是 “ 快 *,“ 快 ?是 HBuilder 
的 最 大 优势 ， 它 通过 完整 的 语法 提示 和 代码 输入 法 、 代 码 块 等 ， 大 幅 提 升 了 HTML、 
JavaScript、CSS 的 开发 效率 。 

启动 HBuilder 工具 步骤 : 双击 HBuilder 图 标 ， 选择 “ 暂 不 登录 ”， 即 可 进入 HBuilder 
主 界面 ， 如 图 1-8 所 示 。 





















































图 1-8 HBuilder 主 界面 视图 


1.4.1 文件 菜单 


在 HBuilder 编辑 器 中 ， 使 用 最 多 的 就 是 “文件 ”菜单 ， 如 图 1-9 所 示 ， 它 的 主要 功能 
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就 是 让 我 们 方便 地 创建 一 些 文件 或 工程 项 目 ， 还 能 
够 导入 导出 一 些 文件 工程 、 查 看 文件 的 位 置 以 及 进 
行 一 些 保 存 和 退出 等 操作 。 





1.4.2 ”表面 功能 介绍 

“ 工 欲 善 其 事 ， 必 先 利 其 器 。” 挑 选 一 个 适合 es 
自己 的 编辑 工具 是 第 一 步 ， 想 要 做 出 一 个 漂亮 的 前 。 加 了 juilger “文件 "菜单 视图 
端 界面 ， 我 们 还 要 清 想 地 知道 该 工具 每 个 部 分 的 功 
能 是 怎么 样 的 。 只 有 做 到 熟练 使 用 , 才能 知道 一 个 好 的 商业 网 站 是 怎样 一 步 步 开发 出 来 的 。 
下 面 我 们 就 来 简单 介绍 一 下 HBuilder 主 界面 的 各 个 区 域 的 作用 ， 如 图 1-10 所 示 。 
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图 1-10 HBuilder 主 界面 功能 介绍 


HBuilder 界面 共 分 为 以 下 4 大 区 域 。 

(1) 菜单 工具 栏 : 主要 提供 了 一 系列 的 菜单 供用 户 创建 文件 以 及 更 好 地 编辑 、 使 用 
文件 。 

(2) 项 目 管理 区 域 : 该 区 域 主要 是 方便 用 户 去 管理 自己 创建 的 项 目 ， 可 以 进行 项 目的 
新 建 、 删 除 等 操作 。 

(3) 项 目 编辑 区 域 : 该 区 域 主要 是 进行 项 目的 编辑 工作 。 

(4) 快捷 键 区 域 : 该 区 域 都 是 一 些 快捷 操作 方式 ， 用 户 可 以 使 用 这 些 快捷 方式 ， 快 速 
操作 该 软件 ， 不 用 频繁 使 用 鼠标 ， 速 度 更 快 ， 效 率 更 高 。 
































1.4.3 HBuilder 浏览 器 配置 


如 果 我 们 在 编辑 HTML 文件 时 ,不 想 再 去 频繁 地 打开 浏览 器 去 浏览 效果 ,可 以 直接 在 
HBuilder 软件 中 进行 浏览 器 的 配置 ， 一 键 搞定 ， 不 用 繁琐 地 在 浏览 器 中 输入 文件 的 地 址 。 

配置 步 又 如 下 : 

(1) 选择 “运行 ” |“ 运行 配置 ”命令 ， 即 可 出 现 如 图 1-11 所 示 的 配置 对 话 框 。 

(2) 单 击 “+” 按钮 ， 会 弹出 另 一 个 对 话 框 ， 如 图 1-12 所 示 。 
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[Sm |] 于 
1-11 HBuilder 浏览 器 配置 1-12 添加 外 部 浏览 器 


(3) 名 称 可 以 随便 起 ， 但 是 建议 起 一 些 有 意义 的 名 称 。 如 果 大 家 使 用 的 浏览 器 是 更， 
名 称 为 更 即 可 ; 用 的 是 谷歌 ， 名 称 为 Chrome; 用 的 火狐 ， 名 称 命名 为 Firefox; 当然 也 可 
以 自己 随便 起 个 名 称 ， 在 这 不 做 要 求 ， 自 己 知 道 使 用 的 是 什么 浏览 器 就 可 以 了 。 在 “位 置 ” 
框 中 添加 所 用 的 浏览 器 地 址 ， 在 此 就 以 谷歌 为 例 ， 如 图 1-13 所 示 。 











Chrome 
Caprogram Files WS5N\Google\Chrome Wapplication\chrome.exe 





FN: -ur %URL% 
【便于 %URL% 举 包 质 URL] 
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图 1-13 HBuilder 中 谷歌 浏览 器 的 配置 


(4) 单 击 “确定 ” 和 “应 用 ”按钮 ， 浏 览 器 就 配置 好 了 ， 以 后 再 使 用 浏览 器 浏览 页 面 
时 ， 只 需 直接 单 击 工具 栏 中 有 浏览 器 标识 的 那个 图 标 ， 就 可 以 看 到 所 编写 HTML 的 页 面 效 
果 ， 非 常 方便 。 


1.4.4 使 用 HBuilder 新 建 一 个 网 页 


以 上 主要 介绍 了 HBuilder 的 使 用 及 浏览 器 的 配置 ， 接 下 来 ， 大 家 可 以 使 用 HBuilder 
来 创建 一 个 新 的 网 页 。 打 开 HBuilder 软件 ， 显 示 出 主 界面 ， 然 后 去 创建 一 个 新 的 页 面 ， 其 
步 又 如 下 : 

(D 选择 “文件 ”| “新建 ”| “HTML 文件 ”命令 ， 如 图 1-14 所 示 。 
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图 1-14 新 建 HTML 文件 


(2) 此 时 会 弹出 一 个 对 话 框 ， 如 图 1-15 所 示 ， 修 改 HTML 文件 名 称 ， 在 这 里 起 名 为 
“first_html.html”， 然 后 单 击 “ 完 成 ”按钮 。 
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图 1-15 为 HTML 文件 起 名 


(3) 编写 HTML 文件 ，title 可 以 起 名 为 “HBuilder 编写 的 第 一 个 HTML 文件 ”，body 


标签 下 写 一 行 “ 欢 迎 来 到 HBuilder 的 世界 ， 让 你 体会 到 飞 一 样 的 感觉 ……”， 页 面 内 容 如 
下 所 示 : 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>HBuilder 编写 的 第 一 个 HTML 文件 </title> 
</head> 
<body> 


欢迎 来 到 HBuilder 的 世界 ， 让 你 体会 到 飞 一 样 的 感觉 …… 
</body> 
</html> 


(4) 使 用 浏览 器 浏览 已 经 编写 的 HTML 文件 ， 可 以 使 用 我 们 已 经 配置 好 的 浏览 器 来 进 


行 浏览 。 选 择 “ 运 行 ”| Chrome 命令 或 者 直接 单 击 工具 栏 中 我 们 配置 的 Chrome 浏览 器 图 
标 ， 即 可 弹出 浏览 器 页 面 ， 如 图 1-16 所 示 。 


RS 
”从 = ”加 咒 ”REPp)- 安全 (9) ~ 
ae 让 你 体会 到 飞 一 样 的 感 








或 100% 


图 1-16 弹出 的 HIML 文件 浏览 视图 
如 此 ， 一 个 简单 的 HIML 文件 效果 图 就 展示 在 大 家 面前 了 ， 直 观 且 清晰 。 


1.5 ”在 页 面 中 添加 HTML 基本 标签 


在 网 页 创作 中 ， 文 字 是 最 基本 的 元 素 之 一 。 是 否 能 够 合理 地 把 文字 的 大 小 


、 颜 色 等 设 
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置 好 ， 会 直接 影响 浏览 者 对 网 站 的 印象 。 本 节 将 讲解 HTML 的 常见 标签 。 
1.5.1 标题 标签 


在 浏览 网 页 时 ， 常 常会 看 到 一 些 标题 文字 ， 用 于 对 文本 中 的 章节 进行 划分 ， 它 们 以 固 
定 的 字号 显示 。 标 题 能 分 隔 大 段 文字 ， 概 括 下 文 内 容 ， 根 据 逻 辑 结构 安排 信息 。 
HTML 提供 了 六 级 标题 ，<hl> 最 大 ，<h6> 最 小 ,用 户 只 需 把 文字 放 入 这 些 标签 内 ， 由 
浏览 器 负责 显示 ， 如 下 所 示 。 
示例 1-1: 
<html> 
<head> 
<title> 标 题 标签 </title> 
</head> 
<body> 
<hl> 今 天 天 气 不 错 </h1> 
<h2> 今 天 天 气 不 错 </h2> 
<h3> 今 天 天 气 不 错 </h3> 
<h4> 今 天 天 气 不 错 </h4> 
<h5> 今 天 天 气 不 错 </h5> 
<h6> 今 天 天 气 不 错 </h6> 
</body></html> 
效果 如 图 1-17 所 示 。 es 
需要 注意 的 是 ， 每 个 标题 独占 一 行 ， 也 就 是 说 一 [GS we/nao0r D- Box| Gime | 
行文 字 里 面 只 能 有 一 种 标题 。 I 


1.5.2 ”段落 级 标签 


在 网 页 中 要 想 把 文字 有 条 理 地 显示 ， 离 不 开 段落 
标记 。 在 HTML 中 ， 段 落 使 用 <p> 和 </p> 来 表示 。 

<p></p> 标 记 对 用 于 创建 一 个 段落 ， 在 此 标记 对 
之 间 加 入 的 文本 将 按照 段落 的 格式 显示 在 浏览 器 上 。 
另外 ，<p> 标 记 还 可 以 使 用 align 属性 ， 用 于 说 明 对 齐 
方式 , 语法 是 : <p align=""></p>。align 可 以 是 Left( 左 对 齐 )、Center( 居 中 ) 和 Right( 右 对 齐 ) 
三 个 值 中 的 任何 一 个 。 如 <p align="Center"></p> 表 示 标 记 中 的 文本 使 用 居中 的 对 齐 方 式 ， 
如 下 所 示 。 

示例 1-2: 

<html><head> 

<title> 段 落 标签 </title> 

</head> 

<body> 





1-17 标题 标签 效果 图 
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<p align="center"> 卜 算 子 。 咏 梅 </p> 

<p align="center"> 风 雨 送 春 归 ， 飞 雪 迎 春 到 。</p> 

<p align="center"> 已 是 悬崖 百丈 冰 ， 犹 有 花枝 俏 。</p> 
<p align="center"> 俏 也 不 争 春 ， 只 把 春来 报 。</p> 

<p align="center"> 待 到 山花 烂漫 时 ， 她 在 从 中 笑 。</p> 
</body></html> 


效果 如 图 1-18 所 示 。 


EL 3 a 
C |©1270018020/first. 食 
下 复 子 咏 梅 
风琴 送 春 归 ， 飞 才 迎 春 到 
已 是 县 产 百丈 冰 , 犹 有 花枝 售 。 
符 到 山花 烂泥 时 ， 她 在 从 中 笑 . 


1-18 段落 标签 效果 图 


结束 标签 </p> 可 以 不 写 ， 下 一 个 <p> 标 签 的 出 现 ， 就 意味 着 上 一 个 <p> 段 落 的 结 来。 | 
| 


1.5.3 ”换行 标签 


换行 标记 用 <br> 来 表示 ， 它 没有 结束 标记 。 它 与 段落 标记 的 区 别 在 于 它 仅 表示 换行 ， 
但 是 上 下 两 行 仍然 为 一 个 段落 。 例 如 ， 将 上 面 的 例子 修改 为 如 下 所 示 。 
示例 1-3: 


<html> 

<head> 

<title> 换 行 标签 </title> 

</head> 

<body> 

<p> 卜 算 子 . 咏 梅 <p> 

风雨 送 春 归 ， 飞 雪 迎 春 到 。<br> 

已 是 悬崖 百丈 冰 ， 犹 有 花枝 俏 。<br> 
俏 也 不 争 春 ， 只 把 春来 报 。<br> 

待 到 山花 烂漫 时 ， 她 在 从 中 笑 。<br> </body> 
</html> 


效果 如 图 1-19 所 示 。 


1-19 ”换行 标签 效果 图 
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1.5.4” 预 排版 标记 


在 网 页 创作 中 ， 一 般 是 通过 各 种 标记 对 文字 进行 排版 的 。 但 是 在 实际 运用 中 ， 经 常 需 
要 一 些 特殊 的 排版 效果 ， 这 时 使 用 标记 控制 往往 比较 麻烦 。 解 决 办 法 就 是 保留 文本 格式 的 
排版 效果 , 例如 空格 、 制 表 符 等 。 如 果 要 保留 原始 的 文本 排版 效果 , 则 需要 使 用 <pre> 标 记 。 

在 <pre> 与 </pre> 之 间 的 文本 在 浏览 器 中 生成 的 效果 将 会 和 我 们 编写 时 指定 的 格式 完 
全 一 样 。 如 需 实现 页 面 原来 的 效果 ， 使 用 <pre> 标 签 会 变 得 很 方便 。 


示例 1-4: 


<html><head> 
<title>pre 预 排版 标签 </title></head> 








图 1-20” ”<pre> 预 排版 标签 效果 图 


1.5.5 文本 格式 化 标签 
在 网 页 中 ， 除 了 标题 文字 外 ， 普 通 的 文字 信息 更 是 不 可 缺少 的 ， 而 各 种 各 样 的 文字 效 


果 可 以 使 网 页 更 加 丰富 多 彩 。 
在 编辑 网 页 时 ， 可 以 直接 在 <body> 和 </body> 之 间 输 入 文字 ， 这 再 简单 不 过 了 。 但 是 


这 样 做 完 的 网 页 ， 浏 览 起 来 混乱 不 堪 : 文字 不 分 段落 ， 也 没有 多 彩 的 颜色 。 所 以 ， 输 入 好 
文字 后 ， 还 要 对 文字 进行 格式 化 。 
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1. <b> 标 签 

<b> 标 签 可 以 使 文字 以 粗 体 形式 显示 ， 如 : 
<b> 该 文本 将 以 粗 体 显示 </b> 

2. <i> 标 签 

<i> 标 签 可 以 使 文字 以 斜体 形式 显示 ， 如 : 
<i> 该 文本 将 以 斜体 显示 </> 

3. <u> 标 签 

<u> 标 签 可 以 使 其 内 部 文字 加 上 下 画 线 ， 如 : 
<u> 该 文本 将 以 下 划 线 显示 </u> 

4. <sup> 标 签 

<sup> 标 签 可 以 使 其 内 部 的 文字 比 前 方 的 文字 高 一 些 ， 并 以 更 小 的 字体 显示 ， 如 : 
欢迎 <sup> 光 临 </sup> 

5. <sub> 标 签 

<sub> 标 签 可 以 使 其 内 部 的 文字 比 前 方 的 文字 低 一 些 ， 并 以 更 小 的 字体 显示 ， 如 : 
欢迎 <sub> 光 临 </sub> 


下 面 演示 这 些 文本 格式 化 标签 的 效果 。 
示例 1-5: 


<html> 
<head> 
<title> 文 本 格式 化 标签 </title> 


<b> 国 风 周南 汉 广 <b></p> 
南 有 乔木 ， 不 可 <u> 休 息 <u>。<jp> 


汉 有 游 女 ， 不 可 < 记 求 思 </i>。</p> | we/nmo0t ~ a ox | G xt 


加 


”和合 国 ~ 铝 昼 mm)” 安 人 9) 





汉 之 <sub> 广 侨 </sub>， 不 可 <sup> 泳 思 </sup>。</p> 。 | 国 风 周 南 滩 广 
南 有 乔木 ， 不 可 休息 。 


江 之 永 矣 ， 不 可 方 思 。</p> 汉 有 游 女 ， 不 可 奖 瑟 。 
汉 之 -s， 不 可 
</html> 江 之 永 疾 ， 不 可 方 思 。 





效果 如 图 1-21 所 示 。 图 1-21 文本 格式 化 标签 效果 图 
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1.5.6 列表 


列表 用 于 按 逻 辑 方式 对 数据 分 组 。 常 用 的 列表 有 以 下 三 种 。 


无 序列 表 ; 
有 序列 表 ; 
自 定义 列表 。 


. 无 序列 表 (Unordered List) 


所 谓 “无 序列 表 ”， 当 然 是 指 各 条 列 间 并 无 顺序 关系 ， 纯 粹 只 是 利用 条 列 式 方法 来 呈 
现 资料 而 已 ， 此 种 无 序 标签 ， 在 各 条 列 前 面 均 有 一 符号 以 示 间 隔 。 无 序列 表 使 用 <ul> 标 签 


来 创建 ， 用 <1l> 表 示 列 表 中 的 每 一 项 ， 如 下 所 示 。 
示例 1-6: 
<html> 
<head> 


<title> 无 序列 表 </title> 
</head> 


国际 互联 网 提供 的 服务 有 : 
<ul> 
<li>WWW 服务 </li> 
<li> 文 件 传输 服务 </li> 
<1i> 电 子 邮件 服务 </1i> 
<1i> 远 程 登录 服务 </1i> 
<1i> 其 他 服务 </li> 


效果 如 图 1-22 所 示 。 

前 面 的 符号 一 定 要 是 圆 形 的 吗 ? 不 ， 我 们 可 以 加 
入 type=" 形 状 名 称 "属性 来 改变 其 符号 形状 , 共有 以 下 
3 个 选择 。 

edisc( 实 心 圆 ) 

e@ square( 小 正方 形 回 

e circle( 空 心 圆 o) 

下 面 对 示 例 1-6 做 一 些 改动 ， 以 改变 外 观 ， 如 下 
所 示 。 

ul type="circle"> 

效果 如 图 1-23 所 示 ， 看 看 发 生 了 什么 变化 ? 


CB nzrootrp-ecx EE 


”人 稻 ~" 国 " 口 性 mip)- 





国际 互联 网 提供 的 服务 有 ， 


文件 传输 服务 
电子 邮件 服务 
”还 

“其 他 服务 





1-22 无 序列 表 标 签 效 果 图 
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可 
也 


添加 相应 的 type 属性 即 可 。 


之 


以 发 现 每 一 行 的 符号 变 成 了 空心 圆 。 
可 以 修改 列表 中 每 一 项 的 样式 ， 只 需 对 <li> 





有 序列 表 (Ordered List) 


“有 序列 表 ” 是 指 各 条 列 之 间 是 有 顺序 的 ， 从 


1、2、3、… 一 直 延 伸 下 去 。 有 序列 表 用 <ol> 来 标记 ， 





列表 中 的 每 一 项 用 <li> 来 标记 。 1-23 无 序列 表 符号 改变 效果 图 
和 无 序列 表 标签 一 样 ， 我 们 也 可 以 选择 不 同 的 
符号 来 显示 顺序 ， 一 样 是 用 type 属性 来 更 改 ， 共 有 以 下 5 种 符号 。 


1( 数 字 ); 

A( 大 写 英文 字母 ); 
a( 小 写 英文 字母 ); 
I( 大 写 罗 马 数字 ); 
i( 小 写 罗马 数字 )。 


示例 1-7: 


<html> 
<head> 


<title> 有 序列 表 </title> 


</head> 


国际 互联 网 提供 的 服务 有 : 
<ol type="1"> 
<li>WWW 服务 <li> 
< 这 文件 传输 服务 </li> 
<l 记 电子 邮件 服务 </li> 
<l 这 远程 登录 服务 </li> 
<li> 其 他 服务 </li> 


显示 效果 如 图 1-24 所 示 。 


如 果 要 把 所 有 或 部 分 项 目 编号 显示 为 大 写 罗 马 数 二 


字 ， 


只 需要 修改 <ol> 或 <li> 的 type 属性 值 为 I。 Ce Er 
= 已 ~ FE(p)~ 


也 可 以 改变 第 一 行 的 编号 值 ， 只 需 添加 start 属性 。 | 二 人 





例如 ， 把 上 例 中 的 <ol type="1"> 改 为 : 
<ol type="1" start ="11"> 


Rs 





再 来 观看 网 页 ， 会 发 现 每 一 项 的 编号 变 成 了 11、 
Wt 图 1-24 有 序列 表 标签 效果 图 
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3. 自 定 义 列表 (Definition List) 


自 定义 列表 用 于 对 列表 条 目 进行 简短 说 明 ， 用 <dl> 开 始 ， 列 表 条 目 用 <dt> 引 导 ， 说 明 
用 <dd> 引 导 ， 如 示例 1-8 所 示 。 
示例 1-8: 


<IDOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title> 测 试 <title> 


<d>WWW 
<dd>World Wide Web， 万 维 网 

<dt>URL 

<dd>Uniform Resource Locations， 统 一 资源 定位 符 
<dt>HTTP 

<dd>Hyper Text Mark-up Language， 超 文本 标记 语言 
</d> 


</body> 
</html> 


效果 如 图 1-25 所 示 。 pp 
各 种 列表 之 间 可 以 互相 嵌 套 ， 每 嵌 套 一 层 ， A 全 
列表 条 目的 输出 就 会 有 更 大 的 缩 进 。 A 2 





World Wide Web, 万 维 网 


1.5.7 ”设置 文本 字体 ee tei | 


Hyper Text Mark-up Language， 超 文本 标记 语言 - 





下 1006 ~ 


<font> 标 签 可 以 用 来 给 文本 设置 字体 、 大 小 、 图 1-25 自 定 义 列表 测试 效果 图 
颜色 等 。 使 用 方法 如 下 所 示 : 


<font color=" " size=" " face=" "> 文字 内 容 </font>。 


size 属性 值 一 共有 7 种 ， 从 <font size=1>( 最 小 ) 到 <font size=7>( 最 大 )。 另 外 ， 还 有 一 种 
写法 为 <font size=+1> 文 字 内 容 </font>， 其 含义 为 : 比 预 设 字 大 一 级 。 当 然 也 可 以 写 为 font 
size=+2( 比 预 设 字 大 二 级 )， 或 是 font size=-1( 比 预 设 字 小 一 级 )。 一 般 而 言 ， 预 设 字体 为 3。 

若 要 给 字体 设置 颜色 ， 需 要 使 用 font 标签 的 color 属性 ，color 值 可 以 是 英文 颜色 单词 
或 者 十 六 进 制 数值 。 

face 属性 可 以 给 文字 设置 字体 ， 但 前 提 是 浏览 者 要 安装 了 这 种 字体 ， 否 则 将 以 浏览 者 
系统 上 的 默认 字体 显示 。 

示例 1-9: 

<!IDOCTY?PE html> 
<head> 











认识 HTML5 及 开发 工具 介绍 


<font size="1"> 字 体 一 </font> <font size="-2"> 字体 一 </font> 
es </font> <font size="-1"> 字体 二 </font> 
ee </font> <font size="+0"> 字体 三 </font> 
| </font> <font size="+1"> 字体 四 </font> 
a </font> <font size="+2"> 字体 五 </font> 


<p> 
<font size="6"> 字 体 六 </font> <font size="+3"> 字体 六 </font> 


ee color="#0000FF"> 字 体 七 </font> 

<font size="+4" color="blue" face=" 隶 书 "> 字体 七 </font> 

<body> 

</html> 

示例 1-9 用 两 种 方式 设置 了 字体 大 小 ， 将 “ 字 一 
体 七 ”的 颜色 设置 为 蓝 色 ， 并 给 最 后 一 个 “字体 CE 
七 ”设置 了 隶书 字体 ， 效 果 如 图 1-26 所 示 。 ES 

<font> 标 签 虽然 可 以 控制 文本 的 大 小 、 颜 色 ， 二 
但 局 限 性 太 大 ， 例 如 ， 只 能 把 文字 大 小 分 为 7 个 等 字 h 三 字体 三 
级 。 在 实际 运用 中 ,一般 都 是 通过 CSS 样式 表 来 实 ES 
现 对 文本 的 控制 的 ( 见 第 6 章 )。 守候 条 二 

字体 六 字体 六 
1.5.8 插入 图 片 字体 七 字体 七 〖 
i 


在 网 页 中 也 可 以 随意 插入 图 片 ， 需 要 使 用 的 标 图 1-26 文本 字体 标签 测试 效果 图 
签 为 <img>。 

<img> 标 签 的 属性 较 多 ， 简 单 表示 如 下 : 

<img src=" 图 片 位 置 " height=" 高 度 " width=" 宽 度 " alt=" 说 明文 字 " align=" 对 齐 "> 

src 属性 指明 图 片 的 位 置 ， 可 采取 绝对 路 径 或 者 相对 路 径 。 路 径 及 图 片 名 尽量 不 要 出 
现 中 文字 符 。 

height、width 决定 图 片 在 网 页 上 显示 的 大 小 。 例 如 ， 一 张 图 片 的 大 小 为 100X100， 可 
以 将 这 两 个 属性 分 别 设置 为 9"， 这 样 在 网 页 上 显示 的 效果 就 是 一 张 50X 50 大 小 的 图 片 。 
当然 ， 我 们 不 推荐 这 么 做 ， 在 做 网 站 时 ， 应 该 先 把 图 片 等 素材 准备 好 。 如 果 不 设置 height、 
width 属性 ， 网 页 将 会 以 图 片 的 默认 大 小 显示 。 
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当 我 们 浏览 网 页 时 ， 有 时 图 像 会 由 于 网 络 的 原因 无 法 显示 , 会 发 现在 图 片 的 位 置 显示 了 
一 些 文字 ， 用 以 对 图 片 进行 说 明 。 这 就 是 alt 属 性 的 作用 了 ， 让 浏览 者 知道 这 个 图 片 究竟 是 干 
什么 用 的 。 
align 属性 用 于 设置 对 齐 ， 决 定 图 片 在 包含 它 的 容器 中 的 对 齐 方 式 。 
此 外 ， 还 可 以 指定 文本 与 图 像 的 距离 。 文 本 与 图 像 的 间距 用 vspace=#，hspace=# 指 定 ， 
# 表 示 整 数 ， 单 位 是 像素 。 前 者 指定 纵向 间距 ， 后 者 指定 横向 间距 。 
示例 1-10: 
<!IDOCTYPE html><head> 
<meta charset="utf-8"> 
<title> 测 试 </title> 
</head> 
<body> 
<img src="images/sanya.JPG" width="300" height="300" alt=" 三 亚 旅游 " align="middle"> 在 图 片 中 
间 显示 
</body> 
</html> 
效果 如 图 1-27 所 示 。 
从 图 1-27 可 以 看 到 , 文字 相对 于 图 片 是 上 下 居中 
显示 的 。 若 图 片 无 法 显示 ， 就 会 出 现 说 明文 字 “ 三 亚 


1.5.9 插入 特殊 符号 片 中 间 显 示 岂 








某 些 字符 在 HTML 中 有 特殊 的 含义 ,例如 “<”、 
“>” 等 。 如 果 我 们 想 在 网 页 上 显示 这 些 符号 ， 就 不 Ss 
能 简单 地 输入 “<”、“>”， 因 为 它们 会 被 解释 为 标 。 ”图 127 插入 图 片 标签 测试 效果 图 
签 的 开始 或 结束 。 例 如 ， 想 在 页 面 上 显示 “<fonty”， 如 果 直接 输入 就 会 被 浏览 器 认为 是 
标签 ， 这 时 候 就 要 使 用 它们 的 转 义 码 。 常 用 的 转 义 码 及 其 对 应 的 符号 如 表 1-1 所 示 。 





表 1-1 常用 的 转 义 码 及 其 对 应 的 符号 


&quot; 条 条 大 路 通 罗 马 &quot; 
欢 &nbsp; 迎 &nbsp; 光 &nbsp;: 临 
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需要 注意 以 下 几 点 : 
转 义 序列 的 各 字符 间 不 能 有 空格 。 
转 义 序列 必须 以 “;” 结 束 。 
单独 的 & 不 被 认为 是 转 义 开始 。 
区 分 大 小 写 。 


1.5.10 ”插入 横 线 


横 线 一 般 用 于 分 隔 同一 HTML 文档 的 不 同 部 分 。 在 窗口 中 画 一 条 横 线 非常 简单 ， 只 要 
写 入 <hr> 即 可 ， 写 法 如 下 : 


<hr width="50%" size="10" align="center" color="#0033FF"> 


其 中 width 指 长 度 ， 可 以 用 占 页 面 长 度 的 百分比 ， 或 者 以 数字 来 固定 横 线 长 度 。 
size 指 横 线 高 度 ， 以 像素 为 单位 。 


align 指 在 页 面 里 是 如 何 对 齐 的 ， 可 以 有 左 、 中 、 右 三 种 对 齐 方式 。 
color 定义 横 线 的 颜色 。 


此 外 ， 还 可 以 添加 noshade 属性 来 规定 横 线 有 没有 阴影 。 
示例 1-11: 


页 面 上 的 显示 效果 如 图 1-28 所 示 。 





” 荐 * 园 -局 贮 ”FEp)” 安全 (S) 





R100% ~ | 
图 1-28 插入 横 线 <hr> 标 签 效果 图 


如 果 想 让 线 的 长 度 随 页 面 而 改变 ， 以 保持 占 页 面 长 度 的 50%， 可 以 采用 “width= 数 字 ” 
来 固定 长 度 。 


1.5.11 ”添加 多 媒体 元 素 


多 媒体 是 现代 网 站 的 必 备 元 素 ， 有 了 它 网 站 会 变 得 更 漂亮 ， 更 能 吸引 用 户 。 添 加 了 多 
媒体 的 网 站 从 视觉 、 听 觉 及 操作 性 上 会 让 用 户 全 面 地 感觉 到 华丽 和 实用 。 
下 面 介绍 几 种 多 媒体 元 素 的 添加 方法 。 


1. 滚动 文字 


利用 <marquee> 标 签 可 以 让 文字 在 网 页 上 动态 滚动 。 
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(1) 基本 滚动 ; <marquee> ... </marquee>。 
<marquee> 我 从 右 跑 到 左 ， 不 会 停止 </marquee> 
默认 情况 下 ， 文 字 将 一 遍 一 遍地 从 页 面 右边 向 左边 滚动 。 
(2) 方向 : <marquee direction=#>。 # 可 以 是 left、right。 


<marquee direction=left> 我 从 右 向 左 移 ! </marquee> <p> 
<marquee direction=right> 我 从 左 向 右 移 ! </marquee> 


(3) 方式 : <marquee behavior=#>。 # 可 以 是 scroll、slide、alternate。 


<marquee behavior=scroll> 我 一 遍 一 遍 往 左 走 ! </marquee> <P> 
<marquee behavior=slide> 我 只 走 一 次 就 停 了 ! </marquee> <P> 
<marquee behavior=alternate> 我 从 右 到 左 ， 再 从 左 到 右 走 ! </marquee> 


(4) 循环 : <marquee loop=#>。# 代 表 次 数 ， 若 未 指定 则 一 直 循 环 。width 指 滚动 范围 的 
长 度 ; 若 要 设置 高 度 ， 则 用 height 属性 。 


<marquee loop=3 width=50% behavior=alternate> 我 只 走 3 趟 ! </marquee> 

(5) 速度 <scrollamount=#>。 指 深 动 速度 。 

<marquee scrollamount=20> 我 走 得 好 快 啊 ! </marquee> 

(6) 延 时 : <scrolldelay=#>。 指 文字 深 动 间隔 ，scrolldelay 值 的 单位 是 毫秒 。 

<marquee scrolldelay=500 scrollamount=100> 我 走 一 步 ， 停 一 停 ! </marquee> 

还 有 一 些 属性 ， 如 align 设置 对 齐 ， 可 以 为 top、middle、bottom 等 ， 而 hspace= 数 值 、 
vspace= 数 值 ， 则 用 来 设置 滚动 文字 与 周围 元 素 的 间距 。 

2. 背景 音乐 

使 用 bgsound 标签 可 以 给 网 页 设置 背景 音乐 。 音 乐 通常 可 以 为 mid、mp3 等 格式 。 格 式 
类 似 于 : 

<bgsound src="jy001.mid" loop=3> 


设置 好 音乐 的 路 径 和 循环 次 数 ， 打 开 页 面 后 就 可 以 听 到 动人 的 音乐 了 。 如 果 没 写 loop 
属性 或 loop 设置 为 -1， 则 代表 无 限 次 循环 播放 音乐 。 


1.6 HTML5 新 增 标 签 


自 1999 年 以 后 HTML4.01 已 经 改变 了 很 多 ,但 是 今天 , 随 着 HTML5 的 风行 ,HTML4.01 
中 的 一 些 元 素 或 标签 在 HTML5 中 已 经 被 废弃 或 重新 定义 ， 而 且 为 了 更 好 地 适应 现代 人 对 
互联 网 的 需求 , 在 HTML5 中 添加 了 很 多 新 的 元 素 以 及 功能 。 比 如 定义 独立 内 容 的 <article> 
标签 、 定 义 声音 内 容 的 <audio> 标 签 、 定 义 图 形 的 <canvas> 标 签 、 调 用 命令 的 <command> 标 
签 、 定 义 公 历时 间或 日 期 的 <time> 标 签 、 定 义 视频 的 <video> 标 签 等 ， 这 些 标 签 极 大 地 丰富 
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了 网 页 的 内 容 ， 也 使 我 们 的 体验 度 大 大 提高 。 
1.6.1 <article> 标 签 


<article> 标 签 主要 是 用 来 定义 一 些 来 自 外 部 的 内 容 ， 比 如 论坛 帖子 、 报 纸 文 章 、 博 客 
条 目 、 用 户 评论 等 内 容 ， 通 常 大 家 看 到 的 内 容 并 不 是 对 应 本 网 站 的 一 个 具体 的 页 面 ， 它 是 
可 以 被 外 部 独立 引用 的 内 容 。 

示例 1-12: 


<html> 
<head> 
<meta charset="UTF-8"> 

<title>article 标签 定 义 独立 的 内 容 </title> 
</head> 
<body> 

<article> 

可 能 的 article 实例 : 


凋 ” 和 从 " 加 - 口 吊 页) 安全)” I 上 (OO) 各 - 


可 能 的 article 实 例 ， 论坛 帖子 报纸 文章 博客 条 目 用 户 评论 
以 上 是 article 中 所 可 能 使 用 到 的 实例 








图 1-29 ”<article> 标 签 效果 图 


1.6.2 ”声音 内 容 的 <audio> 标 签 


<audio> 标 签 用 于 对 音乐 或 其 他 音频 流 的 调用 和 播放 。 大 家 日 常 浏览 网 页 时 会 发 现 , 通 
常 我 们 打开 网 页 后 ， 会 有 一 些 音乐 自动 播放 ， 优 美的 旋律 让 大 家 不 禁 想 在 这 样 的 网 站 中 多 
浏览 一 会 儿 ， 其 实 想 达 到 这 种 效果 ， 可 以 使 用 <audio> 标 签 来 实现 。 下 面 ， 我 们 就 先 简单 了 
解 一 下 <audio> 标 签 的 使 用 。 
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示例 1-13: 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 控 制 声音 内 容 的 audio 标签 </title> 
</head> 
<body> 
<audio src="/audio/horse.mp3" controls="controls">IE8 以 及 更 早 的 浏 
览 器 不 支持 audio 标签 
</audio> 
</body> 
</html> 
显示 效果 如 图 1-30 所 示 。 
音乐 的 格式 多 种 多 样 ， 有 的 浏览 器 支持 
OGG 格式 ， 有 的 支持 MP3 格式 ， 而 有 的 却 
支持 WAV 格式 ， 浏 览 器 支持 的 格式 可 能 各 
不 相同 ,所 以 有 时 调用 了 <audio> 标 签 ， 但 是 
音乐 没有 播放 成 功 ， 可 能 是 使 用 的 浏览 器 尚 
不 支持 该 音频 格式 ， 只 需要 进行 音频 的 转换 
或 换 用 其 他 浏览 器 即 可 解决 。 图 1-30 audio 音频 显示 效果 图 
<audio> 标 签 可 以 对 音乐 或 其 他 音频 流 进行 调用 。 
src 属性 指定 音频 的 位 置 ， 可 以 使 用 相对 定位 ， 也 可 使 用 绝对 定位 ， 不 过 建议 对 于 音频 
路 径 及 音频 名 称 最 好 不 要 使 用 中 文字 符 。 
controls 属性 如 果 出 现 ， 则 会 向 用 户 显 示 控 件 ， 比 如 图 1-30 所 展示 出 来 的 播放 按钮 。 
除 以 上 两 个 属性 外 ， 还 有 其 他 属性 用 来 控制 音频 的 行为 。 
如 当 出现 autoplay 属性 时 ， 则 音频 在 就 绪 后 会 自动 播放 ， 不 用 自己 再 去 单 击 播放 按钮 
来 进行 播放 了 ; 当 出 现 loop 属性 时 ， 每 当 音频 播放 结束 便 会 重新 开始 播放 ， 当 出 现 muted 
属性 时 ， 则 音频 输出 会 被 静音 。 通 过 这 些 属性 ， 我 们 就 可 以 精确 地 定义 音频 的 行为 ， 更 好 
地 设计 出 一 款 商业 网 站 。 








1.6.3 图 形 的 <canvas> 标 签 


<canvas> 标 签 是 一 个 画布 标签 ， 它 自身 没什么 实际 行为 ， 只 是 一 个 容器 而 已 ， 我 们 可 
以 通过 这 个 标签 结合 脚本 来 进行 图 形 的 绘制 ， 画 出 自己 想 要 展现 的 效果 。 画 布 是 一 个 矩形 
区 域 ， 我 们 可 以 控制 该 区 域 中 的 每 一 个 像素 ，canvas 有 多 种 绘制 路 径 、 拢 形 、 圆 形 、 字 符 
以 及 添加 图 像 的 方法 。 不 过 这 个 标签 也 不 是 所 有 浏览 器 都 支持 ， 因 此 我 们 可 以 在 canvas 的 
开始 和 结束 标签 中 添加 一 个 提示 文本 “您 的 浏览 器 不 支持 canvas 标签 ”， 这 样 就 会 在 
<canvas> 标 签 所 在 的 位 置 上 显示 该 文本 ， 这 个 时 候 可 以 换 一 个 浏览 器 看 看 效果 。 
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示例 1-14: 


<html> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 画布 标签 </title> 

</head> 


<body> 
<canvas id="mycanvas" width="200" height="200" 
style="border: 3px solid red:"> 您 的 浏览 器 不 支持 HTMLS5 canvas 标签 


显示 效果 图 如 图 1-31 所 示 。 

<canvas> 标 签 是 画布 标签 ， 是 一 个 容器 ， 可 RE 
以 容纳 大 家 想 要 放 的 内 容 、 图 形 等 。 a 

id 属性 是 为 后 面 结合 脚本 来 服务 的 ， 在 脚本 | 
中 可 以 通过 id 值 对 canvas 画布 进行 操作 。 

width 和 height 分 别 定义 了 画布 canvas 的 宽 
度 和 高 度 。 

style 是 样式 ， 在 后 期 大 家 会 有 所 了 解 。 这 人 句 
话 主要 是 定义 了 画布 边框 大 小 为 3px; solid 是 实 
心 的 意思 ， 就 是 这 个 边框 是 实心 显示 ; red 是 红色 ， 也 就 是 边框 显示 为 红色 。 





1-31 canvas 画布 标签 效果 图 


1.6.4 ”调用 命令 的 <command> 标 签 


<command> 标 签 表示 用 户 可 以 调用 的 命令 ， 该 标签 可 以 定义 一 些 命令 按钮 ， 比 如 单 选 
按钮 、 复 选 框 或 按钮 。 但 如 果 要 显示 这 些 内 容 , 必须 要 借助 于 <menu> 标 签 , 而 且 <command> 
标签 必须 在 <menu> 标 签 内 , 才能 够 显示 这 些 元 素 , 不 过 可 以 单独 用 <command> 标 签 来 规定 
键盘 的 快捷 键 。 

示例 1-15: 

<html> 

<head> 


<meta charset="UTF-8"> 
<title>command 命令 </title> 
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显示 效果 如 图 1-32 所 示 。 

通过 浏览 器 对 网 页 效果 进行 浏览 ， CE 三 command 梧 和 
然后 单 击 “ 快 点 我 ! ! ! ”， 就 会 弹出 i 
Hello World 的 小 窗口 ，<command> 标 签 
要 放 到 <menu> 标 签 下 ，onclick 命令 是 
当 单 击 <command> 标 签 中 的 内 容 时 会 
执行 一 些 操作 。 图 1-32 ”command 命令 效果 图 





























1.6.5 ”定义 时 间或 日 期 的 <time> 标 签 


<time> 标 签 也 是 HTMLS5 新 增 的 标签 ， 主 要 用 来 定义 时 间或 日 期 ， 也 可 以 同时 定义 ， 
不 过 <time> 标 签 定义 的 是 公历 的 时 间 (24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 
示例 1-16 : 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 定 义 时 间或 日 期 的 time 标签 </title> 
</head> 
<body> 
<p> 我 们 每 天 早上 <time>6:00</time> 起 来 展 练 </p> 
<p> 三 峡 大 坝 <time datetime="2006-5-20"> 全 线 </time> 修 建成 功 ! ! ! </p> 
</body> 
</html> 
显示 效果 图 如 图 1-33 所 示 。 Be 
datetime 属性 规定 日 期 或 时 间 ， 当 在 <time> 标 [re 
签 中 未 指定 日 期 或 时 间 时 , 可 以 使 用 datetime 属性 ， | E 
而 且 该 属性 在 浏览 器 中 不 会 泻 染 任何 特殊 的 效果 。 


1.6.6 ”定义 视频 的 <video> 标 签 图 1-33 time 标签 效果 图 


在 HIMLS 版 本 以 前 ， 要 想 观 看 网 页 上 的 视频 ， 都 需要 安装 支持 Flash 的 插件 ， 并 且 使 
用 <object> 和 <embed> 标 签 ,来 通过 浏览 器 播放 swf、 flv 等 格式 的 视频 文件 ， 但 现在 的 智能 
手机 和 iPad 等 一 般 都 无 法 支持 Flash， 所 以 通常 也 无 法 浏览 页 面 上 的 视频 。 为 了 改变 这 一 
现象 , 在 HIML5 中 添加 了 <video> 这 个 标签 ， 使 我 们 不 需要 安装 第 三 方 插件 ， 就 可 以 轻松 
地 加 载 视频 文件 了 。 

示例 1-17: 
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<title> 用 于 播放 在 线 视频 的 Video 标签 </title> 
</head> 


区 全 width="300" height="300" sre="../audio/Green_video.mp4" 
controls="controls"> 您 的 浏览 器 不 支持 video 标签 </video> 
</body> 
</html> 
显示 效果 图 如 图 1-34 所 示 。 | 
Internet Explorer 9+、 Firefox、Opera、Chrome、 Ole 0 >cxjenmrancwaao- "| | mo 
Safari 都 支持 <video> 标 签 ，IE8 及 其 以 前 版 本 都 不 一 一 
支持 该 标签 。 程 序 中 的 src 是 视频 的 地 址 ， 可 以 是 
绝对 地 址 , 也 可 以 是 相对 地 址 ; controls 是 用 来 向 用 
户 显示 控件 ， 比 如 视频 /音频 播放 按钮 ，width 和 
height 是 播放 器 的 宽度 和 高 度 ; autoplay 属性 是 当 视 1-34 video 标签 效果 图 
频 就 绪 后 就 会 自动 播放 ; loop 属性 是 当 媒 介 文 件 完 
成 播放 后 根据 值 循环 播放 ; muted 属性 是 规定 视频 的 音频 输出 为 静音 模式 。 


【单元 小 结 】 


HTML 文档 是 包含 标记 标签 的 文本 文件 ,这 些 标签 告诉 Web 浏览 器 如 何 显 示 页 面 。 
HTML 标签 不 区 分 大 小 写 。 

标签 具有 属性 ， 属 性 进一步 描述 网 页 上 HTML 元 素 的 附加 信息 。 

HTML 文档 分 为 head 部 分 和 body 部 分 ， 它 们 并 列 位 于 <html> 标 签 内 。 

Meta 用 于 提供 有 关 页 面 的 信息 ， 搜 索引 擎 通常 会 用 到 这 些 标 签 。 

HBuilder 是 一 种 强大 的 Web 编辑 工具 ， 可 以 灵活 地 创建 网 页 。 

HTML 基本 标签 有 <hl>…<h6>、<p>、<br>、<pre>、<font>、<img>。 

插入 图 片 标签 <img>; 插入 特殊 符号 标签 <font>; 插入 横 线 标签 <hr>。 

让 文字 滚动 标签 <marquee>;， 添加 背景 音乐 标签 <bgsound> 。 

HTML5 新 增 标签 包括 <article>、<audio>、<canvas>、<command>、<time>、 
<video> 等 。 


【单元 自 测 】 


1. 在 HTML 中 ， 下 列 代码 ( 。”) 可 以 实现 每 隔 60 秒 自动 刷新 页 面 的 功能 。 
A. <meta http-equiv="refresh" content="1"> 
B. <meta http-equiv="refresh" content="60"> 
C. <meta http-equiv="expires" content="1"> 
D. <meta http-equiv="expires" content="60"> 
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2. 下 列 语句 中 , (””) 将 HTML 页 面 的 标题 设置 为 “HTML 练习 ”。 
A. <head>HTML 练习 </head> B. <title>HTML 练习 </title> 
C. <body>HTML 练习 </body> D. <html>HTML 练习 </html> 
3. ( ”) 标 签 有 助 于 进行 搜索 操作 ， 它 包含 在 HTML 文档 头 部 中 ， 并 使 用 属性 和 属 
性 值 组 合 。 
A. <title> B. <body> 
C. <br> D. <meta> 
4. 下 列 叙 述 正确 的 是 (  )。 
A. <font> 标 签 中 的 size 属性 用 于 设置 文本 大 小 ， 默 认 size=1 
B. 有 序列 表 <ol>、 无 序列 表 <ul>、 自 定义 列表 <dl> 之 间 不 能 互相 骨 套 
C. <br> 与 <p> 没 有 区 别 ， 都 代表 换行 
D. 标题 标签 中 <h1> 最 大 ，<h6> 最 小 
5. 下 列 哪 一 项 不 是 HTMLS5 新 增 的 标签 ?(  ) 
A. <video> B. <time> 
C. <dt> D. <canvas> 


【上 机 实战 】 


上 机 目标 


使 用 基本 的 HTML 标签 创建 简单 的 HTML 文档 ; 
练习 HTML 常用 标签 及 HTML5 新 增 标签 ; 
(选修 ) 练 习 使 用 Dreamweaver 制作 网 站 首页 ; 
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练习 1: 使 用 基本 的 HTML 标签 制作 网 页 


【问题 描述 】 
使 用 理论 课 中 学 到 的 标签 ， 制 作 简单 网 页 ， 如 

图 1-35 所 示 。 
【问题 分 析 】 [CGI J 一 
主要 是 练习 HTML 最 基本 的 标签 ， 如 下 所 示 ; 1-35 ”新 建 网 页 对 话 框 
<html>，<head>，<title>，<body> 
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对 于 一 个 完整 的 HTML 网 页 来 说 ， 其 结构 可 表示 如 下 。 


<HTHL> 
<head> 
<title> 








本 一 头 部 
</title> 
<meta...> 


<body> 








</body> 
</HTHL> 











注意 网 页 的 标题 ， 标 题 在 <title> 标 签 里 面 设置 。 由 于 网 页 文字 分 为 多 行 ， 所 以 在 每 一 
行 的 代码 后 面 ， 应 该 加 上 一 个 换行 标签 <br>。 

给 <body> 标 签 加 上 background 属性 , 设置 背景 图 片 。 这 里 要 注意 图 片 和 网 页 的 位 置 关 
系 ， 也 就 是 相对 路 径 的 问题 。 


【参考 步骤 】 

(1) 新 建 一 个 文本 文档 。 
(2) 书写 代码 。 

<html> 


<head> 
<title> 欢 迎 光临 我 的 小 站 </title> 


<body backeround="picl.gif'> 
欢迎 您 的 光临 ! <br> 
希望 这 里 能 给 大 家 带 来 欢乐 。<br> 
同时 也 希望 您 多 提 意 见 ， 大 家 一 同 进步 。<br> 
</body> 
</html> 
(3) 把 文本 文档 另存 为 “1-1.htm”。 
练习 2: 使 用 标签 布局 页 面 


【问题 描述 】 
做 出 如 图 1-36 所 示 的 效果 。 其中， 问题 3 中 int、 
让 else、return 等 关键 字 为 蓝 色 。 


【问题 分 析 】 

要 注意 下 标的 位 置 不 同 ， 使 用 的 标签 也 不 同 ; 横 
线 的 画 法 ; 一 段 内 容 中 插入 不 同 颜 色 所 使 用 的 标签 ; ! 
空格 在 HIML 里 的 写法 。 图 1-36 标签 布局 页 面 图 
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选修 : 使 用 Dreamweaver 制作 网 站 首页 


【问题 描述 】 
定义 站 点 ， 名 称 为 “我 的 站 点 ”"， 本 地 根 路 径 为 EE 盘 myweb 文件 夹 下 ， 并 为 该 站 点 创 
建 首页 ， 名 称 为 index.html。 教 员 应 向 学 员 提供 相关 图 片 ， 作 为 解决 此 问题 所 需要 的 上 机 
素材 。index.html 页 的 效果 图 如 图 1-37 所 示 。 
TT 
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图 1-37 首页 浏览 


【问题 分 析 】 
使 用 Dreamweaver 先 新 建站 点 和 页 面 。 


【参考 步骤 】 
(1) 启动 Dreamweaver。 


选择 “开始 ”|“ 程 序 ”| Adobe Dreamweaver 命令 启动 Dreamweaver。 

(2) 新 建站 点 。 

@ 在 “我 的 电脑 ”了 E 盘 中 新 建 名 为 myweb 的 文件 夹 ， 该 文件 夹 作为 站 点 的 本 地 根 文 
件 夹 ， 并 将 上 机 素材 所 在 的 文件 夹 复制 到 myweb 文件 夹 下 。 

@ 在 Dreamweaver 菜单 栏 中 选择 “站 点 ”|“ 新 建站 点 ”命令 ， 此 时 ， 将 显示 “站 点 
定义 ”对 话 框 。 

@ 该 对 话 框 默认 显示 的 是 “基本 ”选项 卡 ， 我 们 直接 切换 到 “高 级 ”选项 卡 来 编辑 
该 站 点 ， 单 击 该 对 话 框 中 的 “高 级 ”按钮 ， 将 出 现 “高 级 ”选项 卡 对 话 框 。 

@ 在 该 对 话 框 的 “分 类 ”选项 中 选择 “本 地 信息 ”， 在 “站 点 名 称 ” 一 栏 中 输入 “我 
的 站 点 ”。 

@ 单 击 “ 本 地 根 文件 夹 ” 栏 后 面 的 文件 夹 图 标 ， 选 择 存 储 网 页 的 根 文 件 夹 ， 即 前 面 
在 王 盘 所 设计 好 的 文件 夫 myweb。 
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@ 因为 现在 我 们 所 编辑 的 是 本 地 站 点 ， 所 以 其 他 选项 使 用 默认 设置 。 单 击 “ 确 定 ” 
按钮 ， 该 站 点 编辑 成 功 。 

(3) 新 建 页 面 。 

@ 选择 “文件 ”| “新 建 ” 命 令 ， 将 出 现 如 图 1-38 所 示 的 “新 建文 档 ” 对 话 框 ， 单 击 
“创建 ”按钮 ， 该 页 面 创建 成 功 。 
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HEE 








图 1-38 “新 建文 档 ” 对 话 框 


@ 选择 “文件 ”|“ 保 存 ” 命 令 ， 将 该 页 面 保存 至 本 地 站 点 根 文件 夹 EE 盘 myweb 文 件 
夹 下 ， 并 将 该 页 面 命名 为 index.html， 如 图 1-39 所 示 。 
@ 选择 “修改 ”| “页面 属性 ”命令 ， 在 “页面 属性 ”对 话 框 的 “外 观 ” 栏 中 设置 背 
景 颜色 为 “#A2C8EB”， 左 边 距 和 上 边 距 都 设 为 0。 
@ 在 页 面 属性 的 “标题 /编码 ” 栏 中 修改 该 页 面 的 标题 为 “我 的 首页 ”， 并 设置 编码 为 
GB2312， 如 图 1-40 所 示 ， 然 后 单 击 “ 确 定 ” 按 钮 即 可 。 
mv OF 
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图 1-39 保存 页 面 图 1-40 “页 面 属性 ”对 话 框 


(4) 使 用 表格 布置 页 面 。 

@ 选择 “插入 ”|“ 表 格 ”命令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 “2”， 列 数 
为 “1”， 宽 度 为 “760 像素 "， 单 元 格 边框 、 单 元 格 间距 和 单元 格 边 距 都 设 为 0。 单 击 “ 确 
定 ” 按 钮 ， 即 可 成 功 创建 表格 1。 

@ 将 光标 停留 在 第 一 行 的 单元 格 里 ,选择 “插入 ”| “媒体 ”| SWF 命令 , 在 弹出 的 “ 选 
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择 文件 ”对 话 框 中 选择 Flash 文件 所 在 的 位 置 为 index image 文件 夹 下 的 banner.swf 文件 ， 
然后 单 击 “确定 ”按钮 ， 即 可 将 Flash 成 功 插入 。 

@ 将 光标 停留 在 第 二 行 的 单元 格 里 ， 选 择 “ 插 入 ”| “表格 ”命令 ， 插入 一 个 1 行 3 
列 、 宽 度 为 760 像素 的 谈 套 表格 2, 同样 将 单元 格 边框 .单元 格 间距 和 单元 格 边 距 都 设 为 0。 

@ 将 光标 停留 在 表格 2 的 第 一 个 单元 格 里 ， 选 择 “ 插 入 ”| “图像 ”命令 ,打开 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 要 插入 的 图 像 文件 为 image 文件 天 下 的 
logo_ new.gif, 

@ 将 光标 停留 在 表格 2 的 第 二 个 单元 格 里 ， 选 择 “ 插 入 ”| “表格 ”命令 ， 插 入 一 个 9 
行 1 列 、 宽 度 为 215 像素 的 嵌 套 表格 3， 同 样 将 单元 格 边框 、 单 元 格 间距 和 单元 格 边 距 都 
设 为 0。 

@ 在 表格 3 的 9 行 中 依次 插入 image 文件 天 下 的 9 张 图 片 : wall.gif、market.gif、 
succes.gif、 need.gif、 ask.gif.、 dwnl.gif、 rants.gif、 cont.gif 和 linkdwn.gif. 

@ 在 表格 2 的 第 三 个 单元 格 中 插入 image 文件 夹 下 的 图 片 default.gif。 

(5) 浏览 页 面 。 

Q@ 选择 “文件 ”|“ 保 存 ” 命 令 ， 将 该 页 面 保存 。 

@ 按 F12 快捷 键 浏览 该 页 面 。 

至 此 ， 使 用 Dreamweaver 完成 了 制作 包含 Flash 和 图 片 的 页 面 ， 如 图 1-41 所 示 。 
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图 1-41 首页 浏览 


【拓展 作业 】 


1. 做 一 个 自我 介绍 的 网 页 ， 并 给 其 添加 背景 图 片 。 

2. 修改 作业 1， 使 背景 图 片 和 网 页 位 于 不 同 的 目录 ， 使 用 相对 路 径 。 

3. 使 用 meta 标签 设置 作业 1 的 网 页 中 查询 的 关键 字 ， 设 置 时 间 用 来 刷新 ， 并 且 添 加 
一 些 视频 或 者 音频 文件 ， 要 求 打 开 网 页 会 自动 播放 。 








HTML 中 表格 和 表单 的 应 用 


© 课程 目标 


区 掌握 表格 的 用 法 

PF 表单 标记 

区 添加 表单 元 素 

本 输入 类 表单 元 素 

BP 菜单 列表 类 表单 元 素 

PF 文本 域 

本 HTML5 新 增 输入 类 表单 元 素 
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亿 户 币 人 
表格 和 表单 也 是 网 页 中 常用 的 元 素 ， 表 格 用 于 设计 和 规划 网 页 内 容 ， 表 单 则 多 用 于 注 
册页 面 的 设计 。 


2.1 表格 的 应 用 


表格 是 日 常生 活 中 很 常用 的 组 织 数 据 的 方法 ， 在 Word 中 创建 一 个 表格 时 ， 只 需要 指 
定 表格 的 行 数 和 列 数 即 可 ， 非 常 简 单 。 在 网 页 中 做 一 个 表格 稍微 复杂 一 点 ， 需 要 我 们 自 定 
义 表格 的 各 项 属性 ， 制 作 表格 的 简要 步 又 如 下 。 


1. 告诉 浏览 器 绘制 一 个 表格 区 域 


使 用 <table></table> 来 完成 ， 此 时 预览 的 话 ， 这 片区 域 是 空 的 。 不 要 紧 ， 接 着 告诉 浏览 
器 给 表格 添加 一 个 行 。 


2. 添加 行 代码 


使 用 <tr></t> 来 完成 ， 此 时 代码 如 下 所 示 。 
示例 2-1: 


</html> 


再 次 预览 ， 仍 然 发 现 页 面 为 空白 。 很 明显 ， 浏 览 器 显示 的 是 每 一 个 单元 格 ， 所 以 有 了 
框架 还 不 够 ， 还 要 给 表格 设 定单 元 格 。 


3. 添加 单元 格 
使 用 <td></td> 来 完成 ， 如 下 所 示 。 
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这 里 ， 我 们 往 行 里 添加 了 一 个 单元 格 ， 并 设置 内 容 为 1。 保 存 后 的 预览 效果 如 图 2-1 
所 示 。 
怎么 没有 边框 呢 ? 边框 需 要 自己 加 上 才 行 。 这 个 属性 叫 作 border， 修 改 代码 如 下 。 
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图 2-1 添加 单元 格 预览 界面 图 2-2 添加 边框 预览 界面 


2-2 的 效果 就 是 我 们 辛苦 劳动 的 结晶 吗 ? 是 的 ， 事实 上 ， 最 基本 最 简单 的 表格 就 是 
它 了 。 但 只 要 掌握 好 <table>、<tr> 和 <td> 标 签 ， 再 复杂 的 表格 也 能 做 得 出 来 ， 我 们 一 步 一 
步 学 习 。 

(1) 最 简单 的 表格 如 表 2-1 所 示 。 


表 2-1 最 简单 的 表格 


<table border=1> 
<tr><td> 1 </td> </tr> 最 基本 的 表格 
</table> 


(2) 由 表 2-1 可 知 ， 一 个 <td></td> 就 代表 一 个 单元 格 ， 所 以 我 们 再 加 两 个 单元 格 ， 如 
表 2-2 所 示 。 


表 2-2 添加 两 个 单元 格 


<table border=1> 

<tr> 
<td> 1 </td><td> 2 </td> 在 <t> 标 签 内 可 以 有 多 个 <td>， 每 
<td> 3 </td> 个 <td> 代 表 一 个 单元 格 

</tr> 

</table> 


(3) 再 加 一 行 ， 也 就 是 加 一 个 <tr> 标 签 ， 如 表 2-3 所 示 。 
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<table border=1> 
<tr> 
<td> 1 </td><td> 2 </td> 
<td> 3 </td> 
< IE 每 个 <tr> 代 表 一 行 ， 有 多 少 个 <tr> 标 签 ， 就 
< 代表 表格 有 多 少 行 
<td> 4 </td><td> 5 </td> 
<td> 6</td> 
</tr> 
</table> 


(4) 在 实际 运用 中 ， 并 非 所 有 表格 的 单元 格 都 是 这 么 规 规矩 矩 地 上 下 对 照 着 排放 ， 我 
们 还 可 以 合并 单元 格 ， 列 的 合并 如 表 2-4 所 示 。 


表 2-4 列 的 合并 


<table border=1> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 


<tr> 

<td colspan="3">4</td> 
</tr> 
</table> 


(5) 行 的 合并 ( 表 2-5)。 


<table border=1> 
<tr> 


<td rowspan="2"> 1</td> 


<td> 2</td> 
<td> 3</td> 
</tr> 
<tr> 
<td> 5</td> 
<td> 6</td> 
</tr> 
</table> 


注意 , 第 一 行 有 3 个 单元 格 , 第 二 行 只 剩 下 1 
个 单元 格 了 ， 为 什么 ? 因为 第 二 行 的 3 个 单 
元 格 被 合并 为 一 个 了 

因为 要 合并 的 是 同一 行 的 3 个 列 (单元 格 ), 所 
以 是 colspan(col 是 column- 列 的 缩写 , span 意 
为 跨越 ， 且 值 为 3) 


表 2-5 行 的 合并 


这 里 要 合并 的 是 同一 列 的 两 个 行 ,也 就 是 要 
跨越 的 是 行 ， 所 以 叫 作 “rowspan”。 
合并 结束 后 ， 第 一 列 的 两 个 单元 格 就 被 
合并 了 

思考 : 如 果 要 合并 3、6 两 个 单元 格 ， 该 
怎么 写 


以 上 我 们 讨论 了 表格 中 的 单元 格 ， 下 面 再 对 表格 进行 深入 调整 。 
(6) 改变 表格 大 小 ， 定 义 表格 的 宽度 (width) 和 高 度 (heigh)， 如 表 2-6 所 示 。 
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表 2-6 ”定义 表格 的 宽度 和 高 度 
代码 片段 说 明 





<table border=1 width=70 height=70> 
<tr> 
因为 是 对 整个 表格 设置 的 宽度 和 
<td> 1 </td><td> 2 </td> 高 度 ， 所 以 width 和 eight 属性 要 
放 在 <table> 标 签 内 


(7) 设置 单元 格 内 文字 的 位 置 。 

单元 格 内 文字 的 位 置 并 不 是 一 成 不 变 的， 我 们 可 以 使 用 上 中 下 、 左 中 右 等 多 种 方式 来 
调整 。 

左 中 右 用 align 属性 来 表示 ， 分 别 为 left、center、right; 上 中 下 用 valign 属性 来 表示 ， 
分 别 为 top、middle、bottom， 如 表 2-7 所 示 。 


表 2-7 设置 单元 格 内 文字 的 位 置 


<table width=85 height=85 border=1> 
<tr> 
<td align="center" valign="bottom">1</td> align 和 valign 是 对 单元 格 进行 设 
<td align="right" valign="top">2</td> 置 ， 所 以 放 在 <td> 标 签 内 。 


> 同 理 , 如 果 要 让 表格 在 网 页 上 居中 


<td align="right" valign="bottom">3</td> 显示 , 则 只 需 在 <table> 标 签 里 面 设 
<td align="left" valign="middle">4</td> 置 align="center" 即 可 
</tr> 
</table> 


(8) 设置 表格 、 单 元 格 、 边 框 背景 颜色 : bgcolor。 
我 们 可 以 给 整个 表格 或 每 一 行 设置 背景 颜色 ， 也 可 以 给 单元 格 设置 背景 颜色 ， 还 可 以 
给 表格 边框 设置 背景 颜色 ， 如 表 2-8 所 示 。 


表 2-8 设置 表格 、 单 元 格 和 边框 的 背景 色 


<table width=70 height=70 border=1 
bordercolor="red" bgcolor="yellow"> 对 整个 表格 设置 属性 ， 如 高 度 、 
<tr bgcolor="gray'> 长 度 、 边 框 、 表 格 背 景 颜色 、 边 

SU 框 背景 颜色 等 要 放 在 <table> 标 答 

<td> 3 </td> 二 
内 。 相 应 地 ， 对 行 、 单 元 格 的 属 
<tr> 性 设置 也 要 放 在 <t>、<td> 标 签 内 。 

<td bgcolor="white"> 代码 中 设置 的 颜色 有 : 
4</td> 。 表 格 背 景 : 黄色 


人 。 表格 边框 颜色 :红色 
<td bgcolor="white"> 。 第 一 行 背景 :灰色 
6</td> 。 4、6 单 元 格 背景 : 白色 
上 。5 单元 格 边 框 颜色 : 绿色 
</table> 
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仔细 观察 表 2-8 中 的 效果 图 ， 会 发 现 : 
整个 表格 有 一 个 大 边框 ; 
每 个 单元 格 也 有 边框 ; 
表格 边框 与 单元 格 边框 的 颜色 都 可 以 调整 ; 
单元 格 与 单元 格 之 间 有 间距 ; 
单元 格 与 单元 格 之 间 的 间距 颜色 和 表格 背景 颜色 一 致 ; 
单元 格 内 文字 与 单元 格 边 框 之 间 可 以 有 距离 。 
外 ， 我 们 也 可 以 指定 表格 、 行 、 单 元 格 的 背景 图 片 ， 使 用 的 是 background=“ 图 片 
”， 这 和 设置 网 页 背景 图 像 是 一 致 的 。 
(9) 设置 单元 格 填充 距离 。 
单元 格 填充 距离 是 指 单元 格 内 文字 与 单元 格 边框 的 距离 ， 属 性 名 为 cellpadding， 对 单 
元 格 填充 距离 的 设置 如 表 2-9 所 示 。 


表 2-9 设置 单元 格 填充 距离 


> 


路 径 


<table width=70 height=70 border=1 
这 个 属性 经 常用 到 , 可 以 让 表 
ee > 格 内 文字 的 显示 更 美观 。 
这 里 设置 了 填充 距离 为 10 像 
an 素 ， 可 以 看 到 左右 两 端 都 空余 
i 了 10 像素 
(10) 设置 单元 格 间距 。 
单元 格 间距 是 指 单元 格 与 单元 格 之 间 的 距离 ， 也 就 是 边框 与 边框 的 距离 。 单 元 格 间距 
的 设置 如 表 2-10 所 示 。 


表 2-10 设置 单元 格 间距 


<table width=70 height=70 border=1 cellspacing="20 
" bgcolor="#FFFF00"> 
<tr bgcolor="#FFFFFF"> 

<td>1</td><td>2</td> 这 里 设置 了 单元 格 间距 为 20 
</tr> - 像素 ， 整 个 表格 的 背景 为 黄 
<tr bgcolor="#FFFFFF"> 色 ， 每 行 的 背景 为 白色 

<td>3</td> <td>4</td> 

</tr> 

</table> 


有 没有 发 现 我 们 上 面 做 的 表格 边框 很 不 美观 ? 很 粗 ! 是 因为 我 们 设置 了 border=1， 
border 值 只 能 接受 整数 ， 但 假如 将 border 设 为 0， 则 边框 又 消失 了 。 下 面 用 填充 距离 和 间 
距 以 及 背景 颜色 来 “配置 ”一 个 较为 美观 的 表格 ， 如 表 2-11 所 示 。 
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表 2-11 设置 距离 、 间 距 和 背景 色 


<table width="80" border="0" cellpadding="5" 
cellspacing="1" bgcolor="#0066FF"> 
<tr bgcolor="#FFFFFF"> 
<td>1</td> 
<td>2</td> 注意 粗 体 部 分 代码 的 含义 ， 
</tr> 请 查阅 代码 及 前 面 示例 ， 自 
<tr bgcolor="#FFFFFF"> 行 分 析 原 理 
<td>4</td> 
<td>5</td> 
</tr> 
</table> 


表 2-11 中 的 效果 图 的 边框 看 起 来 是 不 是 比 前 面 好 多 了 ? 

有 时 候 我 们 做 表格 ， 需 要 让 表格 内 某 些 单元 格 的 文字 居中 并 加 粗 。 我 们 可 以 用 单元 格 
的 属性 来 实现 ， 也 可 以 用 表格 的 另 一 个 元 素 <th> 来 完成 。 

(11) 设置 表格 表 头 ， 如 表 2-12 所 示 。 


表 2-12 设置 表格 表 头 


<table width="130" border="0" cellpadding="5" 
cellspacing="1" bgcolor="#0066FF"> 
<tr bgcolor="#FFFFFF"> 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 和 <td> 都 代表 单元 格 ， 
SS 唯一 的 区 别 就 是 <th> 可 以 把 
<td> 张 三 </td> | 张 = | 男 | 
<td> 男 </td> 单元 格 内 容 变 为 粗 体 并 居中 
< 显示 
<tr bgcolor="#FFFFFF"> 
<td> 李 四 </td> 
<td> 女 </td> 
</tr> 
</table> 


(12) 设置 表格 标题 。 
表格 标题 是 对 表格 的 一 个 说 明 , 就 像 文 章 的 题目 一 样 。 可 以 使 用 <caption> 标 签 来 完成 ， 
如 表 2-13 所 示 。 
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表 2-13 设置 表格 标题 


<table width="130" border="0" cellpadding="5" 
cellspacing="1" bgcolor="#0066FF"> 
<caption valign="bottom" align="right"> 学 员 性 别 表 
</caption> 
<tr bgcolor="#FFFFFF"> 
< 了 b> 姓名 </th> 
< 了 > 性 别 </th> 学 员 性 别 表 


Bg 姓名 | 性 别 注意 一 点 ，<caption> 是 
ee 张 = | 男 属于 表格 的 
二 </t 四 

a 
</tr> 
<tr bgeolor="#FFFFFF"> 

<td> 李 四 </td> 

<td> 女 </td> 
</tr> 
</table> 


表格 是 网 页 制作 过 程 中 很 常用 的 元 素 ， 可 以 使 页 面 元 素 更 加 有 条 理 地 按照 我 们 的 意愿 
摆 放 。 我 们 可 以 采取 表格 单元 格 内 嵌 套 子 表格 的 方式 来 完成 功能 复杂 的 页 面 。 


2.2 表 里 的 应 用 





在 HTML 文档 中 ,表单 通常 用 于 注册 页 面 ， 当 用 户 填写 好 信息 后 做 完 提交 操作 ， 将 表 
单 的 内 容 从 客户 端的 浏览 器 传送 到 服务 器 上 ， 经 过 服务 器 处 理 程序 后 ， 再 将 用 户 所 需 信息 
送 回 客户 端的 浏览 器 上 ， 这 样 网 页 就 具有 了 交互 性 。 

最 常见 的 表单 主要 包括 文本 框 、 单 选 按钮 、 复 选 框 、 按 钮 等 。 如 图 2-3 所 示 是 一 个 常 
见 的 注册 页 面 ， 它 包含 了 文本 框 、 单 选 按 钮 、 复 选 框 、 按 钮 等 表单 内 容 。 


者 用 户 注 册 

















问题 答案 : 

忘记 密码 的 提示 问题 答案 ,用 于 取 回 论坛 密码 

Email 壤 址 : 

请 输入 有 交 的 邮件 地 址 ， 如 果 你 左 记 了 您 的 密友 ,您 可 以 而 过 它 找 回 


厂 显示 高 组 用 户 设置 和 项 注册 | 清除 


图 2-3 网 页 中 常见 的 表单 
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在 HIML 中 ，<form></form> 标 签 用 来 创建 一 个 表单 ， 定 义 表单 的 开始 和 结束 ， 在 这 
两 个 标签 之 间 的 内 容 都 属于 表单 的 内 容 。 

添加 表单 的 语法 如 下 : 

<form name=" 表 单 名 " method=" 传 送 方式 " action=" 表 单 处 理 程序 "> 


表 2-14 列 出 了 表单 属性 的 详细 说 明 。 


表 2-14 表单 属性 
说 有明 

用 于 给 表单 命名 。 这 一 属性 不 是 表单 的 必需 属性 ,但 为 了 防止 表单 在 提交 到 后 台 处 理 程序 

时 出 现 混乱 ， 一 般 要 设置 一 个 与 表单 功能 相符 的 名 称 。 例 如 ， 注 册页 面 的 表单 可 以 命名 为 

register 

用 于 指定 表单 需要 提交 的 地 址 。 一 般 来 说 ， 当 用 户 单 击 表单 上 的 提交 按钮 后 ， 信 息 会 发 送 到 

action 属性 所 指定 的 地 址 。 如 : action=http//www.163.com 或 action= "mailto: i 

此 属性 告诉 浏览 器 将 数据 发 送 给 服务 器 的 方法 ， 可 取 值 为 get 或 post。 

。 method=get: 使 用 这 个 设置 时 ， 表 单数 据 会 附加 在 URL 之 后 ， 由 用 户 端 直接 发 送 到 服 
务 器 , 所 以 速度 比 post 快 , 但 缺点 是 数据 长 度 不 能 太 长 。 在 没有 指定 method 的 情形 下 ， 
一 般 都 会 视 get 为 默认 值 
method=post: 使 用 这 个 设置 时 ， 表 单数 据 是 作为 一 个 数据 块 与 URL 分 开发 送 的 ， 所 以 
通常 没有 数据 长 度 上 的 限制 ， 缺 点 是 速度 会 比 get 慢 


例如 ， 要 使 用 post 方法 将 表单 提交 到 www.163.com， 如 下 所 示 。 
<form name="register" method="post" action="http://www.163.com"> 





2.3 在 表 里 中 添加 元 素 


按照 表单 元 素 的 填写 方式 可 以 将 表单 分 为 输入 类 控件 和 菜单 列表 类 控件 。 输 入 类 的 控 
件 一 般 以 input 标记 开始 , 说明 这 一 表单 元 素 需 要 用 户 的 输入 ; 而 菜单 列表 类 控件 则 以 select 
开始 ， 表 示 用 户 需 要 选择 。 

input 标记 定义 的 表单 元 素 最 常用 的 有 文本 框 、 按 钮 、 单 选 按钮 等 ， 这 个 标记 的 基本 语 


<input name=" 控 件 名 称 " type=" 控 件 类 型 "> 
</form> 


input 标记 所 包含 的 元 素 类 型 如 表 2-15 所 示 。 
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表 2-15 input 标 记 所 包含 的 元 素 
说 ”有 明 
文本 字段 
密码 域 ， 用 户 在 输入 时 不 显示 具体 内 容 ， 以 * 代 替 
单 选 按钮 
checkbox, 复 选 框 
普通 按钮 
submit 提交 按钮 
重 置 按钮 
hidden 隐藏 域 
file 文件 域 


2.3.1 文本 字段 和 密码 域 


文本 字段 和 密码 域 用 于 创建 单行 文本 输入 框 ， 供 访问 者 输入 单行 文本 信息 。 属 性 和 
说 明 如 表 2-16 所 示 。 











表 2-16 text 属 性 描述 


当 type=text 时 ， 创 建文 本 字段 

当 type=password 时 ， 创 建 密码 域 ， 当 用 户 输入 文字 时 ， 这 些 文字 显示 为 “*” 
文本 字段 或 密码 域 的 名 称 

文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 

在 文本 框 或 密码 域 中 最 多 可 以 输入 的 字符 数 

用 于 定义 默认 值 


例如 ， 创 建 如 图 2-4 所 示 的 登录 页 面 ， 代 码 如 示例 2-2 所 示 。 
示例 2-2: 


<head> 


<title> 文 本 框 和 密码 域 示例 </title> 全 去 SCX| 
Ce o- soxja 


“区 * 回 - 口 吕 ”7XEpv 
<body> 


<p> 登 录 页 面 </p> 
<p> 用 户 名 : <input type="text" name="username" 
value="" size="15"></p> 
<p> 密 ” 码 : <input type="password" name="psd" 
size="15" maxlength="6"></p> 图 2-4 在 页 面 中 添加 文本 字段 和 密码 域 
</body> 
</html> 
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2.3.2 ” 单 选 按钮 


元 素 radio 用 于 创建 单 选 按钮 ， 单 选 按钮 用 于 一 组 相互 排斥 的 值 。 组 中 的 每 个 单 选 按 
钮 应 具有 相同 的 名 称 ， 用 户 一 次 只 能 选择 一 个 选项 。 单 选 按钮 需要 指定 value 的 值 ， 只 有 
从 组 中 选 定 的 单 选 按 钮 才 会 在 提交 时 生成 name/value 对 。 表 2-17 列 出 了 radio 元 素 的 属性 。 


表 2-17 单 选 按钮 属性 


此 属性 设置 该 单 选 按钮 被 选中 
此 属性 设置 该 单 选 按钮 的 名 称 
此 属性 设置 该 单 选 按钮 的 值 


例如 ， 在 示例 2-2 的 body 部 分 加 入 以 下 代码 : pe 
<p> 性 别 : = 
<input type="radio" name="sex" value="male"> 男 
<input type="radio" name="sex" value="female"> 女 </p> 


创建 单 选 按钮 的 效果 如 图 2-5 所 示 。 


心 | @ napw127ool Pp 


性 别 9@ 男 @ 女 
区 


2.3.3” 复 选 框 图 2-5 单 选 按钮 


元 素 checkbox 用 于 创建 复 选 框 。 用户 可 以 选择 多 个 复 选 框 。 选 择 复 选 框 时 ,会 将 一 个 
name/value 对 与 form 一 起 提交 。 表 2-18 列 出 了 checkbox 元 素 的 属性 。 


表 2-18 复 选 框 属性 


此 属性 设置 复 选 框 被 选中 
此 属性 设置 复 选 框 的 名 称 
此 属性 设置 复 选 框 的 值 


示例 2-3: 

<head> 
<title> 复 选 框 示例 </title> 

</head> 


<body> 
<p> 请 选择 你 的 爱好 : </p> 
<p> 
<input type="checkbox" name="test1" value="Al"> 上 网 
<input type="checkbox" name="test2" value="A2" checked> 游 泳 
<input type="checkbox" name="test3" value="A3"> 登 山 
<input type="checkbox" name="test4" value="A4"> 写 作 
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<p> 
</body> 
</html> 


在 表单 中 添加 复 选 框 的 效果 如 图 2-6 所 示 。 ET 


SS 
人 aa-ee- 7 


2.3.4 ”普通 按钮 


普通 按钮 元 素 创建 按钮 button 的 属性 如 表 2-19 
所 未: 图 2-6 在 表单 中 添加 复 选 框 的 效果 


加 上 网 回 游 泳 四 登山 加 写作 - 


表 2-19 ”button 按钮 属性 


此 属性 设置 或 检索 控件 的 名 称 
此 属性 设置 按钮 的 类 型 ， 可 选 定 的 值 有 : button、submit、reset 
此 属性 设置 显示 在 按钮 上 的 初始 值 


例如 ， 在 示例 2-1 中 插入 以 下 代码 可 以 创建 普通 按钮 。 
<input type="button" name="b1" value=" 这 是 普通 按钮 "> 
效果 如 下 所 示 。 

这 是 惫 通 按 甸 | 


2.3.5 ”提交 按钮 


元 素 submit 用 于 创建 提交 按钮 , 当 用 户 单 击 “ 提 
交 ” 按 钮 时 , 表单 就 会 被 提交 至 form 中 所 指定 的 提 
交 地 址 。 

例如 ， 在 示例 2-2 中 插入 以 下 代码 ， 即 可 创建 
提交 按钮: 

<input type="submit" name="b2" value=" 提 交 表单 > 性 别 ， 日 男 “@ 女 

在 表单 中 添加 提交 按钮 的 效果 如 图 2-7 所 示 。 CE 

图 2-7 在 表单 中 添加 提交 按钮 的 效果 

2.3.6” 重 置 按钮 


元 素 reset 用 于 创建 重 置 按钮 。 当 用 户 单 击 此 按钮 时 , 此 重 置 按钮 所 在 表单 中 的 所 有 元 
素 的 值 被 重 置 为 其 value 属性 中 指定 的 初始 值 。 
例如 ， 在 示例 2-2 已 有 代码 的 基础 上 插入 以 下 代码 ， 即 可 创建 重 置 按钮 : 


<input type="reset" name="b3" value=" 重 新 填写 "> 
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创建 重 置 按钮 后 的 效果 如 图 2-8 所 示 。 


2.3.7 ”隐藏 域 


表单 中 的 隐藏 域 主要 用 来 传递 一 些 参数 ， 而 这 些 参 
数 不 需 要 在 页 面 中 显示 。 当 浏览 者 提交 表单 时 ， 隐 藏 域 
的 内 容 会 被 一 起 提交 给 处 理 程序 。 
创建 隐藏 域 的 语法 如 下 : 图 2-8 重 置 按钮 的 效果 
input type="hidden" name=" 隐 藏 域名 称 " value=" 提 交 的 值 " 
如 下 列 代码 所 示 。 
示例 2-4: 





<head> 
<title> 隐 藏 域 和 action 属性 对 比 示例 </title> 
</head> 
<body> 
<form name="exam5" action="exam].htm" method="get"> 
下 面 是 几 种 不 同属 性 的 文本 字段 : 
<p> 姓 名 : <input type="text" name="username" size=15></p> 
<p> 年 龄 : <input type="text" name="age" size=15 maxlength=3></p> 
<p><input type="hidden" name="page_id" value="example"></p> 
<p><input type="submit" name="Submit" value=" 提 交 "></p> 
</form> 


</body> 
</html> 


运行 这 段 代码 时 ， 隐 藏 域 的 内 容 并 不 会 显示 在 页 面 中 ， E 
但 是 在 提交 表单 时 ， 其 名 称 page_id 和 取 值 example 将 会 被 ” 9 
同时 传递 给 处 理 程 序 。 

在 这 里 ， 我 们 来 对 比 一 下 method 属性 中 的 get 方式 和 
post 方式 的 区 别 。 以 上 代码 显示 的 效果 如 图 2-9 所 示 。 

此 时 ，method 指定 的 是 get 方法 ，action 指定 的 是 一 个 空 
页 面 ， 单 击 “ 提 交 ” 按 钮 ， 出 现 的 效果 如 图 2-10 所 示 。 


地 址 栏 中 会 显示 用 “ 
户 在 图 2-9 中 输入 
的 表单 值 以 及 代码 





2-10 当 method 属性 为 get 时 的 效果 
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大 家 可 以 试 一 下 ， 把 method 的 值 改 为 post， 在 地 址 栏 中 会 出 现 什么 效果 ， 此 处 不 再 
殉 述 。 


2.3.8 文件 域 


在 上 传 文件 时 常常 会 用 到 文件 域 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表单 将 选 
中 的 文件 上 传 。 在 设置 电子 邮件 的 附件 、 上 传 头 像 、 发 送 文件 时 ， 常 常会 看 到 这 一 控件 。 
创建 文件 域 的 语法 如 下 : 


<input type="file" name=" 文 件 域 的 名 称 "> 


示例 2-5: 


<html> 

<head><title> 文 件 域 示例 </title></head> 

<body> 

<form action="mailto:yu(@163.com" name="research" method="post"> 
下 面 是 某 网 站 的 注册 页 面 : 
<p> 用 &nbsp;&nbsp; 户 &nbsp;&nbsp; 名 :<input name="username" type="text" size=20></p> 
<p> 密 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 :<input name="password1" type="password" 


size=20></p> 
<p> 请 上 传 你 的 头像 : <input type="file" name="picture"></p> 


运行 后 的 效果 如 图 2-11 所 示 。 
单 击 “ 浏 览 ” 按 钮 后 ， 会 弹出 如 图 2-12 所 示 的 对 话 框 。 


” 队 
下 面 是 某 网 站 的 注册 页 面 ， 
用 户 名 
窗 位 
请 上 传 你 的 头像 : 





图 2-11 创建 文件 域 图 2-12 选择 文件 对 话 框 


2.3.9 菜单 列表 类 表单 元 素 


select 元 素 用 于 显示 下 拉 列 表 。 每 个 选项 由 一 个 option 元 素 表示 ，select 必须 包含 至 少 
一 个 option 元 素 。 用 户 所 选择 的 选项 将 用 高 亮 显示 块 表示 。 表 2-20 列 出 了 select 元 素 的 属性 。 
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表 2-20 select 下 拉 列 表 属性 


指定 元 素 的 名 称 ， 提 交 表 单 时 ， 会 将 name 属性 与 所 选 定 的 值 一 并 提交 
在 有 多 种 选项 可 供用 户 滚动 查看 时 ，size 确定 列表 中 可 同时 查看 到 的 行 数 
表示 在 列表 中 可 以 选择 多 项 








<title> 注 册页 面 </title> 
</head> 
<body> 
<form name="research" method="post" action="mailto:www(@163.com"> 
<p> 注 册页 面 </p> 
<p> 用 户 名 : <input type="text" name="username" value="" size="15"> 
<p> 密 ” 码 : <input type="password" name="psd" size="15" maxlength="6"> 
<p> 性 别 : 
<input type="radio" name="sex" value="male"> 男 
<input type="radio" name="sex" value="female"> 女 
<p> 证 件 类 型 
<select name="cardtype"> 
<option value="id_card"> 身 份 证 </option> 
<option value="stu_card"> 学 生 证 </option> 
<option value="drive_card"> 驾 驶 证 </option> 
<option value="other_card"> 其 他 证 件 </option> 
</select> 
<p> 关 心 的 栏目 
<select name="content" size="3" multiple> 
<option value="ml"> 体 育 栏目 </option> 
<option value="m2"> 科 技 栏目 </option> 
<option value="m3"> 新 闻 栏 目 </option> 
<option value="m4"> 汽 车 栏目 </option> 
<option value="m5"> 房 产 栏 目 </option> 
</select> 
2 提交 表单 三 
<input type="submit" name="b2" value=" "> 二 rr 
<input type="reset" name="b3" value=" 重 新 填写 "> = 
Es 从 "上 国 - 喇 午 - Pp) 
</body> 
</html> 


运行 代码 后 的 效果 如 图 2-13 所 示 。 
性 别 ，6 男 “6 女 


2.3.10 文本 域 的 


科技 栏目 司 
关心 的 栏目 | 新 间 栏目- 


Ce) Ems] 


元 素 textarea 用 于 创建 多 行文 本 输入 控件 。 此 元 素 使 
用 结束 标记 </textarea> 结 束 , 在 <textarea> 和 </textarea> 之 间 





图 2-13 ”添加 列表 项 
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的 内 容 是 该 多 行文 本 框 的 初始 值 。 表 2-21 列 出 了 元 素 textarea 的 属性 。 


表 2-21 textarea 属性 





设置 文本 区 域 的 名 称 

设置 文本 区 域 的 宽度 

设置 文本 区 域 包 含 的 行 数 
例如 ， 在 HTML 的 代码 <body> 的 部 分 插入 如 下 代码 : 


您 的 意见 对 我 很 重要 
<textarea name="info" cols="35" rows="7"> 请 将 意见 输入 此 区 域 
</textarea> 


运行 后 的 效果 如 图 2-14 所 示 。 





您 的 意见 对 我 很 重要 
图 2-14 textarea 属性 运行 后 的 效果 


2.4 HTML5 新 增 表 围 输入 类 型 


随 着 现代 互联 网 技术 的 发 展 和 快速 应 用 ， 为 了 更 好 地 进行 输入 控制 和 验证 ， 简 化 网 页 
的 开发 ，HTML5 中 增加 了 多 个 新 的 表单 输入 类 型 ， 使 网 页 的 开发 难度 大 幅 下 降 ， 并 且 这 
些 标签 简单 易学 .HITMLS 新 增加 的 表单 输入 类 型 最 常用 的 有 email 类 型 .number 类 型 ,range 
类 型 、search 类 型 、url 类 型 。 

现行 主流 浏览 器 对 这 些 属 性 并 不 能 完全 支持 ， 根 据 版 本 的 不 同 ， 对 属性 的 支持 度 也 是 
不 一 样 的 ， 浏 览 器 对 属性 的 支持 如 表 2-22 所 示 。 


表 2-22 浏览 器 所 支持 的 HTML5 属性 
输入 类 型 | IE | ” 火 匆 (Firefox) | ” 欧 朋 (Opera) | 
i 10.0 及 以 上 版 本 支持 
7.0 及 以 上 版 本 支持 
不 支持 | 4.0 及 以 上 版 本 支持 11.0 及 以 上 版 本 支持 10.0 及 以 上 版 本 支持 


4.0 及 以 上 版 本 支持 ”| 9.0 及 以 上 版 本 支持 10.0 及 以 上 版 本 支持 





从 表 2-22 可 以 看 出 ， 不 是 所 有 的 浏览 器 都 支持 这 些 新 增加 的 输入 类 型 ， 但 是 ， 欧 朋 
(Operea) 浏 览 器 是 对 新 数据 类 型 支持 最 好 的 ， 这 些 属 性 也 可 以 在 其 他 主流 浏览 器 中 使 用 ， 
即使 不 被 支持 ， 也 会 以 常规 的 文本 域 显示 。 
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2.4.1 _ email 类 型 


元 素 email 用 于 包含 E-mail 地 址 的 输入 域 ， 在 提交 表单 时 ， 会 自动 验证 email 域 的 值 ， 
减少 了 大 家 自己 校 验 所 花费 的 时 间 和 精力 ， 提 高 了 页 面 的 开发 效率 。 
创建 邮件 格式 的 语法 如 下 : 


<input type="email" name="user_email"/> 


示例 2-7: 
<html> 
<head><title> 邮 件 格式 输入 email 类 型 <title></head> 
<body> 
<form action="#" method="get" > 
姓名 : <input type="text" name="user name" value="/> 
<p> 性 别 : 
<input type="radio" name="sex" value="male"> 男 
<input type="radio" name="sex" value="female"> 女 
<p> 
mail 类 型 :<input type="email" name="user email"/> <br/> 
<input type="submit" value=" 提 交 " align="center"/> 
</form> 
</body> 
</html> 


由 于 下 浏览 器 不 支持 email 类 型 , 我 们 就 使 用 谷歌 浏览 器 来 进行 预览 , 在 E-mail 文本 
框 中 输入 liu 后， 单 击 “ 提 交 ” 按 钮 ， 效 果 如 图 2-15 所 示 。 
系统 提示 我 们 缺少 “@” 邮 件 特殊 符号 ， 这 就 是 email 类 型 自动 验证 的 功能 ， 接 下 来 
添加 上 这 个 符号 ， 效 果 如 图 2-16 所 示 。 
EECIES 


© [© 1270018020/istHTMUhL。 女 ] # 





图 2-15 无 @ 符 号 提交 email 后 的 效果 图 2-16 @ 符 号 后 无 内 容 提交 后 的 效果 


系统 仍 提示 我 们 “@” 特 殊 符号 后 缺少 内 容 ， 那 就 根据 提示 添加 完整 内 容 ， 然 后 单 击 
“提交 ”按钮 ， 完 成 提交 工作 。 


2.4.2 number 类 型 


元 素 number 用 于 对 数值 大 小 进行 限定 ， 有 最 大 值 、 最 小 值 及 数字 之 间 的 间隔 等 属性 ， 
如 表 2-23 所 示 。 
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表 2-23 number 数值 区 间 属 性 


此 属性 设置 number 所 能 允许 的 最 大 值 
此 属性 设置 number 所 能 允许 的 最 小 值 
此 属性 设置 合法 数字 之 间 的 间隔 
此 属性 设置 number 的 默认 值 
例如 ， 在 示例 2-7 中 插入 以 下 代码 : 
Number 类 型 : <input type="number" name="number" min="2" max="20" step="3"/> 
由 于 正 浏览 器 不 支持 number 元 素 ， 我 们 同样 使 用 
谷歌 浏览 器 进行 浏览 , 设置 number 数值 的 效果 如 图 2-17 
所 示 。 
从 图 中 可 以 看 到 , 最 小 值 是 2,， 当 单 击 “ 全 ”或 “ 囊 ” 
时 ， 每 次 会 在 这 个 数值 的 基础 上 增加 或 减少 3， 最 小 值 
为 2， 最 大 值 为 20。 























图 2-17 number 数值 效果 图 
2.4.3 range 类 型 


元 素 range 用 于 创建 数值 元 素 的 区 间 范 围 ， 和 number 元 素 类 似 ， 不 过 是 以 一 个 滑动 条 
的 形式 显示 的 ， 属 性 如 表 2-24 所 示 。 


表 2-24 range 数值 范围 属性 


此 属性 设置 range 所 能 允许 的 最 大 值 

此 属性 设置 range 所 能 允许 的 最 小 值 

此 属性 设置 合法 数字 之 间 的 间隔 

此 属性 设置 range 的 默认 值 
例如 ， 在 示例 2-7 中 插入 以 下 代码 : 
Range 类 型 : <input type="range" name="points" min="2" max="20" step="3"/> 
创建 range 数值 的 效果 如 图 2-18 所 示 。 


2.4.4 search 类 型 


元 素 search 用 于 搜索 ， 常 用 的 有 站 点 搜索 或 Google 搜索 ， 通 常 是 对 关键 词 进 行 搜索 ， 
search 显示 方式 也 是 常规 的 文本 域 。 

在 示例 2-7 中 插入 以 下 代码 ， 即 可 创建 出 搜索 框 。 

<input type="search" name="search1" /> 

添加 对 关键 词 搜索 的 文本 框 效 果 如 图 2-19 所 示 。 
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图 2-18 ”range 数值 范围 效果 图 2-19 添加 对 关键 词 的 搜索 


2.4.5 ”url 类 型 


元 素 URL 用 于 创建 URL 的 地 址 ， 并 在 提交 表单 时 ， 对 URL 域 的 值 进行 简单 的 验证 ， 
在 我 们 通常 浏览 的 网 页 中 ，URL 运用 得 非常 多 ， 基 本 上 每 个 网 页 都 会 有 对 URL 的 运用 。 
在 示例 2-7 中 插入 以 下 代码 ， 即 可 进行 URL 地 址 的 验证 。 
URL 地 址 类 型 ，<input type="url" name="user_url" /> 
输入 URL 地 址 ， 效 果 如 图 2-20 所 示 。 
随便 输入 一 个 值 ， 提 交 后 ， 就 会 自动 验证 。 可 以 从 
图 中 看 到 提示 信息 ， 要 求 我 们 输入 网 址 ， 则 说 明 输 入 的 
内 容 不 符合 要 求 , 需要 重新 输入 正确 的 网 址 。 以 “http://” 
起 ， 后 面 继续 输入 其 他 内 容 ， 则 能 够 成 功 提交 ， 否 则 无 
法 成 功 提交 。 图 2-20 ”URL 自动 校 验 效果 图 


【单元 小 结 】 


表格 : <table>; 表格 元 素 ，<ttr>、<td>、<th>、<caption> 及 相应 属性 。 

使 用 表格 进行 页 面 布局 。 

表单 元 素 用 于 接受 用 户 输入 并 提供 一 些 交 互 式 操作 。 

<form> 标 签 用 于 在 网 页 中 创建 表单 的 区 域 。 

<input> 元 素 用 于 定义 表单 上 的 表单 输入 元 素 , <select> 用 于 定义 菜单 列表 类 表单 元 
素 ，<textarea> 用 于 定义 多 行文 本 输入 框 。 

<email> 用 于 定义 email 电子 邮件 的 地 址 域 ，<url> 用 于 创建 url 地 址 ，<range> 用 于 
定义 数值 元 素 的 区 间 。 


【单元 自 测 】 


1. 根据 以 下 HTML 代码 进行 分 析 : 


<html> 
<head> 
<tile> 表 格 </title> 
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对 于 以 上 代码 ， 以 下 描述 正确 的 是 (  )。 

A. 该 网 页 内 容 的 第 一 行 显示 “表格 ” 
B. 1 和 2 的 表格 在 同一 行 
C. 1 和 3 的 表格 被 合并 为 一 个 单元 格 
D. 1 和 3 的 表格 在 同一 行 

.( “ ) 标 签 用 于 在 网 页 中 创建 表单 。 
A. <Input> B. <Select> C. <Form> D. <Option> 

. 当 列 表 框 中 有 多 个 列表 项 时 ， 如 果 用 户 希 望 同时 查看 到 两 行 ， 下 列 描述 正确 的 
)。 
A. <select name="content" maxlength="3" >...</select> 
B. <select name="content" height="3" >...</select> 
C. <select name="content" size="3" >...</select> 
D. <select name="content" width="3" >...</select> 

. 要 在 网 页 中 插入 密码 域 , 并 且 输 入 的 密码 不 能 超过 6 位 ， 下 列 代 码 正确 的 是 ( 
A. <input type="password" size="6" > 
B. <input type="password" maxlength="6" > 
C. <input type="text" size="6" > 
D. <textarea maxlength="6"></textarea> 

. 在 网 页 上 ， 当 表单 中 的 input 元 素 的 type 属性 为 reset 时 ， 用 于 创建 (。”) 按 钮 。 
A. 提交 B. 重 置 C. 普通 D. 以 上 都 不 对 


【上 机 实战 】 


上 机 目标 


e 使 用 表格 设计 网 页 
e ”使 用 表单 和 常用 HTML 输入 元 素 
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上 机 练习 


练习 1: 使 用 表格 布局 页 面 


【问题 描述 】 
使 用 表格 标签 创建 如 图 2-21 所 示 的 
表格 。 


【问题 分 析 】 ss Re 
首先 找 出 该 表格 的 行 数 和 列 数 ， 然 后 | 县 二 
确定 每 行 所 包含 的 单元 格 个 数 。 全 i 

在 写 每 一 行 的 时 候 ， 要 确定 该 行 的 第 
几 个 单元 格 需要 合并 或 者 需要 被 合并 。 

可 以 看 到 每 个 单元 格 内 的 文字 都 是 居 oo 
中 对 齐 的 。 使 用 单元 格 (而 不 是 表格 ) 的 align=center 属性 居中 对 齐 。 

利用 理论 课 所 学 的 细 线 表格 知识 ， 先 设置 整个 表格 的 背景 颜色 ， 将 表格 边框 设 为 0、 
间距 设 为 1， 再 设置 每 一 行为 另外 一 种 背景 颜色 。 


【参考 步骤 】 

(1) 新 建文 本 文档 。 

(2) 书写 HTML 网 页 框架 。 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


WN 


入 hel2700180: PD BCX x 
请 各 到 同人 从 - 回 - 口 各- mi- 29- IRo)- 加- 





























<table border="0" align="center" cellspacing="1" bgcolor="#999999"> 

<tr bgcolor="#FFFFFF"> 
<td colspan="5"><p align="center"> 价 格 表 </p></td> 

<t> 

<tr bgcolor="#FFFFFF"> 
<td colspan="2"><p align="center"> 型 号 </p></td> 
<td><p align="center"> 容 量 </p></td> 
<td><p align="center"> 价 格 </p></td> 
<td width="78"><p align="center"> 变 化 </p></td> 

</tr> 

<tr bgcolor="#FFFFFF"> 
<td width="100" rowspan="3"><p align="center"><img sre="xs.jpg" width="80" height="80"></p></td> 
<td width="100" rowspan="3"><p align="center">miniplayer </p></td> 
<td width="100"><p align="center">512MB </p></td> 
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<td width="100"><p align="center">699 元 </p></td> 
<td><p align="center">— </p></td> 

</tr> 

<tr bgcolor="#FFFFFF"> 
<td width="100" ><p align="center">1GB </p></td> 
<td width="100" ><p align="center">850 元 </p></td> 
<td ><p align=" 一 <p></td> 

</tr> 

<tr bgcolor="#FFFFFF"> 
<td width="100" ><p align="center">2GB </p></td> 
<td width="100"><p align="center">1099 元 </p></td> 


练习 2: 用 表单 和 表格 制作 注册 页 


【问题 描述 】 
为 了 使 表单 的 外 观 整齐 , 在 实际 开发 中 ,需要 采用 表格 布局 来 排放 表单 元 素 , 如 图 2-16 


【问题 分 析 】 

表格 应 该 设置 10 行 2 列 ， 第 一 行 的 单元 格 占据 2 列 ( 跨 2 列 )。 
参考 代码 : 

<html> 


<head> 
<title> 表 格 和 表单 综合 应 用 </title> 
</head> 
<body bgcolor="#E7E7E7"> 
<form action="" method="post"> 
<table width="400" border="0" align="center"> 
<tr> <td colspan="2" align="center"> 申 请 表 </td></tr> 
<tr> 
<td> 姓 名 </td> 
<td><input type="text" name="EName" size="20" maxlength="30" value="" /></td> 
</tr> 
<tr> 
<td> 性 别 </td> 
<td><input type="radio" name="gender" value="male" checked/> 男 
<input type="radio" name="gender" value="female" /> 女 </td> 
</tr> 
<tr> 
<td> 教 育 程度 </td> 
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<td><input type="checkbox" name="zhuanke"> 专 科 
<input type="checkbox" name="benke"> 本 科 
<input type="checkbox" name="shuoshi"> 硕 士 
<input type="checkbox" name="boshi"> 博 士 </td> 
</tr> 
<tr> 
<td> 月 薪 </td> 
<td><input type="text" name="textfield2" /></td> 
</tr> 
<tr> 
<td> 附 注 </td> 
<td><textarea rows="3" cols="30"> 请 在 这 里 输入 附注 </textarea></td> 
</tr> 
<tr> 
<td> 国 籍 </td> 
<td><select name="select"> 
<option value="china"> 中 国 </option> 
<option value="american"> 美 国 </option> 
<option value="japan"> 日 本 </option> 
<option value="singapore"> 新 加 坡 </option> 
</select></td> 
</tr> 
<tr> 
<td><input type="submit" name="Submit" value=" 提 交 " /></td> 
<td><input type="reset" name="reset" value=" 重 置 " /></td> 
</tr> 


</table> 
</form> 


</body> 
</html> 


上 述 代码 的 运行 结果 如 图 2-22 所 示 。 
令 第 二 阶段 多 


练习 3: 使 用 表单 做 登录 系统 


【问题 描述 】 
练习 使 用 表单 ， 实 现 如 图 2-23 所 示 的 登录 页 面 。 邮 件 类 型 下 拉 菜 单 中 有 : 免费 邮箱 、 
任 你 邮 、U 币 、 会 员 中 心 几 个 选项 。 














免费 邮箱 登录 系统 
男 o 女 
口 科 名 本 科 口 硕士 避风 二 用 户 名 

密 三 | 
本 - 部 件 类 型 本 
各 Me 会 员 非 会 员 
[ 


加 





图 2-22 表单 和 表格 的 综合 应 用 图 2-23 登录 页 面 
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练习 4: 做 一 个 个 人 简历 


【问题 描述 】 
利用 所 学 的 表格 知识 ， 做 一 个 如 图 2-24 
所 示 的 个 人 简历 网 页 。 


【问题 分 析 】 

这 个 表格 有 点 大 ,只 用 一 个 表格 做 拆 分 、 
合并 操作 非常 复杂 ， 并 且 很 容易 影响 表格 的 
其 他 部 分 。 所 以 在 做 这 种 大 型 表格 的 时 候 ， 
要 养 成 把 大 表格 拆 分 为 小 表格 的 习惯 。 

可 以 把 整个 表格 分 为 3 个 小 表格 ， 分 别 
对 应 基本 资料 、 求 职 意向 及 工作 经 历 、 教 育 
背景 3 块 。 这 样 的 3 个 小 表格 之 间 互 相 不 影 
响 ， 做 好 后 再 把 它们 并 排放 在 一 起 。 为 使 页 
面 美 观 ， 每 个 表格 底部 留 一 个 空白 单元 格 (图 中 箭头 标 出 的 部 分 )。 

做 每 一 个 小 表格 的 时 候 ， 利 用 单元 格 的 边 距 、 间 距 结合 背景 颜色 的 使 用 ， 使 表格 美观 
一 些 。 

3 个 小 表格 做 好 后 ， 如 果 我 们 一 个 一 个 让 它们 居中 对 齐 ， 不 仅 不 方便 ， 而 且 不 容易 对 它 
们 进行 整体 控制 。 解 决 这 个 问题 的 方法 是 写 一 个 一 行 一 列 且 边 框 、 边 距 、 间 距 均 为 0 的 外 
围 表 格 ， 国 定 这 个 表格 的 大 小 和 位 置 ， 再 把 3 个 小 表格 放 进 来 ， 这 样 就 解决 了 3 个 小 表格 
不 统一 的 问题 。 


【拓展 作业 】 


1. 练习 如 图 2-25 所 示 的 常用 的 调查 报告 表单 。 
2. 利用 表格 和 表单 实现 如 图 2-26 所 示 的 注册 页 面 。 


下 面 是 某 网 站 的 调查 报告 





























图 2-24 个 人 简历 


姓名 
公司 


地 址 





出 生年 月 ， [55 司 年 区 可 月 FE 本 日 家 
所 在 城市 ， 武汉 上海 北京 深圳 其 他 会 员 类 型 5 个 人 e 公司 c 组 织 
美好， 中 上 网 写作 F 醒 夯 作 壬 FF 肛交 ed 厂 电子 部 件 信件 


电子 邮件 地 址 
是 否 需要 广告 信息 “ 是 c 否 
yl Wl 


图 2-25 某 网 站 调查 报告 图 2-26 注册 页 面 
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© 课程 目标 


PP 了 解 CSS 的 概念 

P 掌握 CSS 的 基本 语法 

本 掌握 如 何 使 用 样式 表 

PP 了 解 <div> 和 <span> 标 签 

P 了解 美化 页 面 的 一 些 属性 及 功能 
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地 户 首 丰 
随 着 网 页 设计 技术 的 发 展 ， 人们 已 经 渐渐 不 满足 原 有 的 一 些 HTML 标记 , 而 是 希望 能 


够 为 页 面 内 容 添 加 一 些 更 加 绚丽 的 属性 ， 如 和 鼠标 标记 、 渐 变 效 果 等 。CSS 技术 的 发 展 使 这 
些 变 成 了 现实 。 


3.1 初步 认识 CSS 


网 页 技术 飞速 发 展 ， 人 们 渐渐 地 不 再 满足 于 一 些 简单 的 页 面 效果 ， 更 希望 页 面 能 够 美 
观 、 漂 亮 ， 并 且 方 便 我 们 去 观看 、 去 浏览 。 随 着 大 家 日 益 增长 的 页 面 浏览 需求 ， 一 种 叫做 
层 合 样式 表 的 计算 机 语言 出 现在 人 们 的 视野 中 。 


3.1.1 什么 是 CSS 


CSS 是 层 倒 样式 表 的 简称 ， 它 的 英文 全 称 是 Cascading Style Sheets， 这 是 一 种 用 来 表现 
HTML 或 XML 等 文件 样式 的 计算 机 语言 。 我 们 都 知道 网 页 是 由 内 容 和 格式 组 成 的 ， 网 页 上 
的 文字 和 图 片 是 内 容 ， 文 字 的 大 小 、 字 体 、 颜 色 等 都 是 格式 ， 而 样式 表 就 是 一 种 控制 网 页 
格式 的 技术 。CSS 不 但 可 以 静态 地 修饰 网 页 ， 还 可 以 配合 各 种 脚本 语言 动态 地 对 网 页 元 素 
进行 格式 化 。 在 网 页 制作 时 使 用 CSS 技 术 ， 可 以 对 网 页 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 
效果 实现 更 加 精确 的 控制 。CSS 文 件 其 实 是 一 种 文本 文件 ， 后 级 名 是 .CSS， 只 是 采用 CSS 
的 语法 规则 来 写 ， 这 样 浏览 器 也 可 以 识别 ， 可 以 将 HTML 代 码 和 CSS 代 码 分 开 编 写 ， 做 到 
内 容 和 格式 相 分 离 , 互 不 干扰 , 条 理 也 更 加 清晰 。 随 着 CSS3 标 准 被 越 来 越 多 的 浏览 器 支持 ， 
CSS 的 作用 也 越 来 越 大 ， 从 而 和 HTML、javascript 组 成 了 网 页 制作 的 三 大 元 素 。 


3.1.2 CSS 发 展 简 史 


1. CSS 出 现 的 原因 


从 1990 年 Web 被 Tim Berners-Lee 和 Robert Cailliau 发 明 出 来 ， 到 1994 年 Web 开始 
进入 人 们 的 生活 ， 样 式 就 以 各 种 形式 存在 着 ， 只 是 最 初 的 HIML 只 包含 很 少 的 显示 属性 。 
而 随 着 HTML 的 发 展 ， 在 HTML 中 添加 了 更 多 的 显示 功能 ， 使 得 HTML 更 加 腔 肿 ， 更 加 
杂乱 ， 为 了 改善 这 种 情况 ， 人 们 开始 寻找 设计 以 什么 样 的 方式 去 解决 这 种 困难 。 


2. CSS 1 

哈 坤 。 利 在 1994 年 芝加哥 的 一 次 会 议 上 第 一 次 提出 了 CSS 的 建议 ， 而 当时 波 特 ， 波 
斯 正在 设计 一 款 名 叫 Argo 的 浏览 器 ， 他 们 决定 共同 设计 CSS。1995 年 的 WWW 网 络 会 议 
上 CSS 又 一 次 被 提出 ， 波 斯 演示 了 Argo 浏览 器 支持 CSS 的 例子 ， 哈 肯 也 展示 了 支持 CSS 
的 Arena 浏览 器 。 同 年 ，W3C 组 织 成 立 ，1996 年 底 ，CSS 初稿 完成 ， 同 年 12 月 ， 层 著 样 
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式 表 的 第 一 份 正式 标准 完成 ， 成 为 W3C 的 推荐 标准 。 
$CGSS52 


1997 年 初 ，W3C 内 组 织 了 专 管 CSS 的 工作 组 ， 由 克 里 斯 。 里 雷 负责 ， 讨 论 了 一 套 内 
容 和 表现 效果 分 离 的 方式 ， 在 1998 年 5 月份， 推出 了 CSS 第 二 版 本 。 

4. CSS3 

1999 年 开始 制定 CSS3， 和 希望 CSS 向 着 模块 化 方向 发 展 ， 于 是 ,在 2001 年 5 月 23 日 
W3C 完成 了 CSS3 的 工作 草案 ， 主 要 包括 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 


背景 、 边 框 、 文 字 特 效 、 多 栏 布局 等 模块 。CSS3 提供 一 些 新 的 特性 及 功能 ， 可 以 使 我 们 
减少 一 些 开发 成 本 和 维护 成 本 ， 并 且 能 够 提升 页 面 的 性 能 。 


3.1.3 CSS 基本 语法 


CSS 语法 结构 如 下 : 

选择 器 { 样式 属性 : 属性 值 ; 样式 属性 : 取 值 ;} 

其 中 ， 选 择 器 可 以 是 多 种 形式 的 ， 例 如 ， 要 定义 HTML 标记 中 H2 的 样式 ， 可 以 使 用 
以 下 代码 。 


ily : 黑体 : fontsize:24px: } 


字体 属性 为 黑体 字体 大 小 为 24px 


3.2 CSS 语法 结构 分 析 


3.2.1 CSS 属性 与 选择 器 ( 仅 保留 3 个 主要 的 选择 器 ) 


CSS 的 属性 很 多 ， 可 以 从 网 上 查阅 相关 资料 。 表 3-1 列 出 了 常用 的 CSS 属性 。 
表 3-1 常用 的 CSS 属性 


font-famil 设置 或 检索 文本 的 字体 


设置 或 检索 文本 字体 的 大 小 
设置 或 检索 文本 的 字体 样式 , 即 字体 风格 , 主要 设置 字体 是 否 为 斜 
font-style 体 。 取 值 范 围 : 
normal | italic | oblique 
用 于 设置 字体 的 粗细 ， 取 值 范围 : 
Normal | bold | bolder | lighter | number 








font-weight 
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CSS 名 称 
color 设置 文本 的 颜色 
background-color | 设置 背景 颜色 
background-image | 设置 元 素 的 背景 图 像 
text-align 设置 文本 的 对 齐 方式 ， 如: 左 对 齐 、 右 对 齐 、 居 中 对 齐 、 两 端 对 齐 
text-indent 设置 文本 第 一 行 的 缩 进 量 ， 取 值 可 以 是 一 个 长 度 或 一 个 百分比 
vertical-align 设置 文本 的 纵向 位 置 
border-style 设置 边框 的 样式 
border-width 设置 边框 的 宽度 
border-color 设置 边框 的 颜色 
border-left 设置 左边 框 的 属性 
width 设置 元 素 的 宽度 
height 设置 元 素 的 高 度 
left 定位 元 素 的 左边 距 
top 定位 元 素 的 项 边 距 
2 设 定 浏览 器 如 何 来 定位 元 素 ,absolute 表示 绝对 定位 , 需要 同时 使 用 left、 
Pm right、top、bottom 等 属性 进行 绝对 定位 
z-index 设置 层 的 层 登 先后 顺序 和 覆盖 关系 


CSS 选择 器 大 致 可 分 为 元 素 选择 器 、Class 选择 器 、ID 选择 器 等 。 下 面 将 逐一 讲解 这 
几 种 主要 的 选择 器 。 


3.2.2 元素 选 择 器 














最 常见 的 CSS 选择 器 是 元 素 选 择 器 。 换 句 话说 ， 文 档 的 元 素 就 是 最 基本 的 选择 器 。 如 
果 设 置 HTML 的 样式 ， 选 择 器 通常 是 某 个 HTML 元 素 ， 比 如 p、hl、em、a， 甚 至 可 以 是 
HTML 本 身 。 


<html> 
<head> 
<style type="text/css"> 
html {color:black;} 
hl {color:blue;} 
h2 {color:silver;} 
</style> 
</head> 
<body> D 127.0.0.1:8020/firstHT) x 
<h1> 这 是 heading 1</hl> C [© 1277.00.1:8020/firsth.. 女 | : 
<h2> 这 是 heading 2</h2> 漠 和 有 轩 Rs 省 E 放 口才 = > 
<p> 这 是 一 段 普通 的 段落 。</p> 
es 这 是 heading 1 
</html> 


在 浏览 器 中 的 输出 结果 如 图 3-1 所 示 。 
在 W3C 标准 中 ,元 素 选择 器 又 称 为 类 型 选择 器 (type 





这 是 heading 2 
这 是 一 息 苦 运 的 段 革 
3-1 使 用 HIML 选择 器 
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selector)。 类 型 选择 器 匹配 文档 语言 元 素 类 型 的 名 称 , 也 匹配 文档 树 中 该 元 素 类 型 的 每 一 个 
实例 。 

下 面 是 规则 匹配 文档 树 中 的 所 有 hl 元 素 : 

hl {font-family: sans-serif:} 

因此 ， 我 们 也 可 以 为 XML 文档 中 的 元 素 设置 样式 。 

XML 文 档 : 


<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="note.css"?> 
<note> 

<to>George</to> 

<from>John</from> 


<heading>Reminder</heading> 
<body>Don't forget the meeting!</body> 
</note> 

hl {font-family: sans-serif:} 

CSS 文档 : 


通过 上 面 的 例子 可 以 看 出 , CSS 元 素 选择 器 (类 型 选择 器 ) 可 以 设置 XML 文档 中 元 素 的 
样式 。 
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在 浏览 器 中 的 输出 结果 如 图 3-2 所 示 。 | Doom “证 
CC |@ 12700.4:8020/firstHTML/htmB/ 元 款 迁 生 器 .。 众 | 
灌 二 有 轩 网 全 党 E 度 门 光 = DD 妆 每 二 DD 本 » 


3.2.3” 群 组 选择 器 George 
John 

假设 希望 h2 元 素 和 段落 都 有 灰色 , 为 达 j 
到 这 个 目的 ,最 容易 的 做 法 是 使 用 以 下 声明 : Reminder 

bh2, p {color:gray;} 

将 h2 和 op 选择 器 放 在 规则 左边 ,然后 用 图 3-2 设置 XML 文档 元 素 样式 
逗号 分 隔 ， 就 定义 了 一 个 规则 。 其 右边 的 样式 (color:gray;) 将 应 用 到 这 两 个 选择 器 所 引用 的 
元 素 。 逗 号 告诉 浏览 器 ， 规 则 中 包含 两 个 不 同 的 选择 器 。 如 果 没 有 这 个 有 逗号， 那么 规则 的 
含义 将 完全 不 同 ， 请 参见 后 代 选 择 器 。 可 以 将 任意 多 个 选择 器 分 组 在 一 起 ， 对 此 没有 任何 
限制 。 

例如 ， 如 果 用 户 想 把 很 多 元 素 显 示 为 灰色 ， 可 以 使 用 类 似 如 下 的 规则 。 


body, h2, p, table, th, td, pre, strong, em {color:gray;} 











Don't forget the meeting! 


过 
| 通过 分 组 ， 可 以 将 某 些 类 型 的 样式 “压缩 ”在 一 起 ,这 样 就 可 以 得 到 更 简洁 的 样式 表 ，; 


以 下 两 组 规则 能 得 到 同样 的 结果 ， 不 过 可 以 很 清楚 地 看 出 哪 一 个 写 起 来 更 容易 。 


hl {colorblue:} 
h2 {colorblue:} 
h3 {color:blue;} 
h4 {color:blue:} 
hs {color:blue:} 
h6 {color:blue:} 
hl, h2, h3, h4, h5, h6 {color:blue:} 


3.2.4 包含 选择 器 


包含 选择 器 又 称 后 代 选 择 器 ， 后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 

我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作用 ， 而 
在 另外 一 些 结构 中 不 起 作用 。 

例如 ， 如 果 用 户 希 望 只 对 hl 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 

hl em {colorred:} 


上 面 这 个 规则 会 把 作为 hl 元 素 后 代 的 em 元 素 的 文本 变 为 红色 , 而 其 他 em 文本 (如 段 
落 或 块 引 用 中 的 em) 则 不 会 被 这 个 规则 选中 。 

<hl>This is a <em>important</em> heading</hl> 

<p>This is a <em>important</em> paragraph</p> 
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当然 ， 用 户 也 可 以 在 hl 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 显 而 易 见 ， 后 代 选 择 
器 的 效率 更 高 。 


3.2.5 CLASS 及 ID 选择 器 


1. CLASS 选择 器 


如 果 有 两 个 不 同类 别 的 标签 ， 如 <P> 和 <H2> 标 签 ， 它 们 都 采用 了 相同 的 样式 ， 如 何 允 
许 它们 也 共享 同一 样式 呢 ? 此 时 ， 可 以 采用 CLASS 类 选择 器 。 
CLASS 类 选择 器 的 定义 格式 如 下 : 


-类 名 


{ 
样式 属性 : 取 值 ; 
样式 属性 : 取 值 ; 


} 


类 名 前 面 有 一 “.” 号 ， 类 的 名 称 可 以 是 任意 英文 单词 ， 或 以 英文 开 头 与 雪 字 的 组 | 


， 一 般 以 其 功能 和 效果 简要 命名 。 


但 是 , 与 直接 定义 HTML 中 的 标记 样式 不 同 的 是 : 这 段 代 码 仅 仅 定义 了 样式 ， 并 没有 
应 用 样式 ， 如 果 要 应 用 样式 中 的 某 个 类 ， 还 需要 在 正文 中 添加 如 下 代码 。 


如 下 示例 定义 了 text 类 选择 器 。 


<html> 
<head> 
<title> 内 构 样 式 表 类 选择 器 示例 </title> 


<body> 

<h2 class="text"> 梅 花 一 一 花 中 君子 </h2> 

<p>&nbsp;&nbsp;&nbsp;&nbsp; 梅 花 树 的 枝 干 不 是 很 粗 ， 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 干 
那样 笔直 地 伸展 开 ， 而 多 是 曲 曲 折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 
一 些 挺拔 的 新 枝 。</p> 

<p class="text">&nbsp;&nbsp;&nbsp;&nbsp; 梅 花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 宫 粉 梅 ; 
有 晶莹 如 玉 的 绿 莹 梅 …...</p> 

</body> 

</html> 
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在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 输出 结果 如 图 3-3 所 示 。 

<H2> 和 第 二 个 <P> 标 签 都 采用 了 text 类 选择 
器 , 所 以 字体 为 隶书 , 并 带 下 划 线 。 而 第 一 个 <p> wo 
标签 没有 采用 任何 样式 ， 所 以 按 默认 样式 显示 。 |en 8 Fs 了 三 se Da 

由 此 例 可 以 看 出 ， 不 同类 别 的 标签 可 以 使 用 | 覆 丰 一 花 中 因子 
同一 类 选择 器 ， 同 一 类 的 标签 也 可 以 采用 不 同 的 。 | ss ED 
类 选择 器 ， 类 选择 器 实现 了 样式 的 灵活 共享 。 人 


一 梅花 的 种 兰 得 多 “有 白 加 过 的 白梅 . 有 挫 如 鲁 的 言 汾 梅 : 丰 唱 共 如 
ET 











2.1D 选择 器 3-3 ”类 选择 器 示例 
ID 选择 器 使 用 HTML 元素 的 ID 属性 。 
ID 选择 器 的 定义 格式 如 下 : 


如 果 某 个 标签 希望 采用 该 ID 选择 器 的 样式 ， 其 语法 格式 为 : 


<PID="DD 名 必 .…</P> 
<H2 D=" D 名 '>...</H2> 


如 下 示例 定义 了 text 类 选择 器 。 


<html> 

<head> 

<title>ID 选择 器 示例 </title> 

<style type="text/css"> 

<!-- 

#text{ 

font-family: 隶 书 ; 
text-decoration:underline: 

} 

</style> 

</head> 


<body> 
<h2 ID="text"> 梅 花 一 一 花 中 君子 </h2> 
<p ID="text">&nbsp:&nbsp:&nbsp:&nbsp: 梅 花 树 的 枝 干 不 是 很 粗 ， 但 长 得 很 独特 。 它 们 很 少 像 其 他 
树 的 枝 干 那样 笔直 地 伸展 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 
便 会 抽出 一 些 挺拔 的 新 枝 。</p> 

>&mnbsp:&nbsp:&nbsp:&nbsp: 梅 花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 暇 的 宫 粉 梅 ， 有 晶莹 如 
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在 浏览 器 中 查看 该 HTML 页 面 时 , 其 输出 结果 


如 图 3-4 所 示 。 © © 12700.18020/firstHTMLhtmB/nID 选 -人 女 | 3 
由 于 ID 选择 器 的 功能 与 CLASS 选择 器 一 样 ， | Ds 

并 且 有 时 容易 与 HTML 标签 的 ID 属性 相 冲 突 ， 所 | 攀 六 一 花 中 转子 

以 一 般 不 推荐 使 用 。 


3.2.6 子 元 素 选 择 器 
3-4 使 用 ID 选择 器 


子 元 素 选 择 器 (Child selectors) 只 能 选择 作为 某 元 素 子 元 素 的 元 素 (IE 6 不 支持 子 元 素 选 
择 器 )。 

如 果 用 户 不 希望 选择 任意 的 后 代 元 素 , 而 是 希望 缩小 范围 , 只 选择 某 个 元 素 的 子 元 素 ， 
可 使 用 子 元 素 选 择 器 。 

例如 ， 如 果 用 户 希望 选择 只 作为 hl 元 素 子 元 素 的 strong 元 素 ， 可 以 这 样 写 : 

hl > strong {colorred:} 

这 个 规则 会 把 第 一 个 hl 下 面 的 strong 元 素 变 为 红色 ， 但 是 第 二 个 srong 不 受 影 响 。 

<hl>This is <strong>very</strong> important.</hl> 

<hl>This is <em>really <strong>very</strong></em> 

important.</hl> 





3.2.7 ” 相 邻 兄弟 选择 器 


如 果 需 要 选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 两 者 有 相同 的 父 元 素 ， 可 以 使 用 相 邻 
兄弟 选择 器 (Adjacent sibling selector)。 

例如 ， 如 果 要 增加 紧 接 在 hl 元 素 后 出 现 的 段落 的 上 边 距 ， 可 以 这 样 写 : 

hl +p {margin-top:50px;} 

这 个 选择 器 读 作 : 选择 紧 接 在 hl 元 素 后 出 现 的 段落 ，hl 和 p 元 素 拥有 共同 的 父 元 素 。 

请 看 下 面 的 文档 树 片段 : 


在 上 面 的 片段 中 ，div 元 素 包含 两 个 列表 : 一 个 无 序列 表 ， 一 个 有 序列 表 。 每 个 列表 都 
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包含 3 个 列表 项 ， 这 两 个 列表 是 相 邻 兄弟 ， 列 表 项 本 身 也 是 相 邻 兄弟 。 不 过 ， 第 1 个 列表 
中 的 列表 项 与 第 2 个 列表 中 的 列表 项 不 是 相 邻 兄弟 ， 因 为 这 两 组 列表 项 不 属于 同一 父 元 素 
(最 多 只 能 算 堂 兄弟 )。 

请 记 住 ， 用 一 个 结合 符 只 能 选择 两 个 相 邻 兄弟 中 的 第 2 个 元 素 。 请 看 下 面 的 选择 器 : 

li+li {font-weight:bold:} 

上 面 这 个 选择 器 只 会 把 列表 中 的 第 2 个 和 第 3 个 列表 项 变 为 粗 体 ， 第 一 个 列表 项 不 受 
影响 。 

相 邻 兄弟 结合 符 还 可 以 结合 其 他 结合 符 。 

html > body table + ul {margin-top:20px:} 

这 个 选择 器 解释 为 : 选择 紧 接 在 table 元 素 后 出 现 的 所 有 兄弟 ul 元 素 ， 该 table 元 素 包 
含 在 一 个 body 元 素 中 ，body 元 素 本 身 是 html 元 素 的 子 元 素 。 


3.2.8 伪 类 及 伪 对 象 


还 有 一 种 特殊 的 用 法 ， 就 是 指定 某 个 标签 的 个 别 属性 的 样式 ， 许 多 资料 上 也 称 为 “ 伪 
类 ”选择 器 。 常 见 的 应 用 就 是 超 链接 ， 超 链接 最 初 不 带 下 划 线 ， 当 用 户 将 鼠标 指针 移动 至 
超 链接 的 上 方 时 ， 便 会 显示 红色 的 下 划 线 ， 当 用 户 单 击 时 超 链接 又 变 成 绿色 ， 并 且 变 得 没 
有 下 划 线 。 代 码 如 下 所 示 ， 效 果 如 图 3-5 一 图 3-7 所 示 。 


<html> 

<head> 

<title> 无 标题 文档 </title> C [©@ 12700.18020/firsth.. 女 ] 5: 

<style type="text/css"> 灌 应 用 澡 百 朗 目 OA5 扩 

af ”* 设置 超 链接 不 带 下 划 线 ，text-decoration 表示 对 我 是 超 链接 ， 移 过 来 后 再 单 击 我 试 试看 
文本 修饰 */ 

color:blue; 

text-decoration:none; 


} 

aihover{ ”人 鼠 标 指针 在 超 链接 上 悬 停 时 ， 带 下 划 线 */ 

color:red; C |© 127.0.0.1:8020/firstH., 会 | : 
text-decoration:underline; 洪 应 用 省 百 朗 同 OA 系统 

y 我 是 直 链接 ， 移 过 来 后 再 单 击 我 斌 试看 
aactive{ ” 作 活动 链接 时 ， 颜 色 为 绿色 ， 并 不 带 下 划 线 */ ee 

color:green; 

text-decoration:none; 


</style> 
© > © [Olzzoola0zonrsth- | : 
洪 应 用 省 百度 门 OA 系统 
<a hre 人 "http://www.163.com"> 我 是 超 链 接 ， 移 过 来 后 再 我 是 超 链接 ， 移 过 来 后 再 单 击 我 试 试看 
</body> 图 3-7 单 击 鼠 标 时 不 带 下 划 线 
</html> 
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伪 对 象 也 叫 伪 元 素 ， 用 于 给 某 些 选择 器 设置 特殊 效果 。 
伪 元 素 的 语法 如 下 : 
selector:pseudo-element {property-value:} 
CSS 类 也 可 以 与 伪 元 素 配合 使 用 : 
selector.class:pseudo-element {property:value;} 
-first-line 伪 元 素 
“first-line” 伪 元 素 用 于 给 文本 的 首 行 设置 特殊 样式 。 
在 下 面 的 例子 中 , 浏览 器 会 根据 “first-line” 伪 元 素 中 的 样式 对 p 元 素 的 第 一 行文 本 进 


伪 元 素 可 以 与 CSS 类 配合 使 用 。 
下 面 的 例子 会 使 所 有 class 为 article 的 段落 的 首 字母 变 为 红色 。 


p.article:first-letter 


ud 

color: #FF0000; 

} 

<p class="article">This is a paragraph in an article。</p> 


可 以 结合 多 个 伪 元 素来 使 用 。 

在 下 面 的 例子 中 ， 段 落 的 第 一 个 字母 将 显示 为 红色 ， 其 字体 大 小 为 xx-large。 第 一 行 
中 的 其 余 文 本 将 为 蓝 色 ， 并 以 小 型 大 写字 母 显示 。 段 落 中 的 其 余 文 本 将 以 默认 字体 大 小 和 
颜色 来 显示 。 


3.2.9 通 配 选择 器 


和 很 多 语言 一 样 ，* 符 号 在 CSS 里 代表 所 有 ， 即 通 配 选择 器 。 
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例如 : 
*{ font-size: 12px; } 
该 例 表示 将 网 页 中 所 有 元 素 的 字体 定义 为 12 像素 ， 当 然 ， 这 仅 是 举 个 例子 ， 一 般 不 


会 做 这 么 极端 的 定义 。 
在 实际 应 用 中 ， 下 面 的 情况 比较 常见 : 


这 个 定义 的 含义 是 将 所 有 元 素 的 外 边 距 和 内 边 距 都 定义 为 0， 而 在 具体 需要 设 定 内 外 
边 距 的 时 候 ， 再 具体 定义 。 从 这 个 例子 可 以 看 出 ， 通 配 选 择 器 的 作用 更 多 是 用 于 对 元 素 
的 一 种 统一 预 设 定 。 

通 配 选择 器 也 可 以 用 于 选择 器 组 合 中 

div *{ color: #FF0000: } 

该 例 表示 在 <div> 标 签 内 的 所 有 字体 颜色 为 红色 。 

有 一 种 例外 的 情况 : 

body *{ font-size:12096: } 

这 时 候 它 表 示 相 乘 ， 当 然 body 也 可 以 换 成 别 的 选择 器 标签 。 由 于 这 种 效果 取决 的 因 
素 较 多 ， 一 般 不 常 使 用 。 


3.3 ”CSS 美化 页 面 


网 页 主要 由 HTML、CSS、JavaScript 这 三 个 主要 部 分 构成 ， 而 CSS 的 主要 作用 就 是 
用 来 美化 网 页 的 。 我 们 从 网 页 上 看 到 的 一 些 漂亮 的 样式 ， 其 实 是 由 CSS 来 呈现 给 大 家 的 
比如 CSS 技术 可 以 帮助 我 们 控制 网 页 中 字体 的 大 小 、 页 面 宽度 、 页 面 内 容 的 位 置 、 字 体 的 
样式 、 背 景 图 片 、 背 景 颜 色 、 图 片 及 文字 的 呈现 等 ，CSS 的 出 现 ， 使 页 面 呈现 出 更 加 唯美 
的 形态 。 


3.3.1 美化 网 页 文字 


当 打 开 一 个 网 页 时 , 我 们 会 发 现 网 页 上 的 字体 不 都 是 完全 一 致 的 , 会 看 到 字体 的 颜色 、 
大 小 、 间 距 、 字 体系 列 、 风 格 、 变 形 等 都 可 能 是 不 相同 的 ， 这 是 因为 我 们 对 网 页 上 的 内 容 
通过 CSS 技术 进行 了 美化 操作 。 

<html> 

<head> 


<meta charset="UTF-8"> 
<title> 使 用 CSS 美化 文字 </title> 
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<style type="text/css"> 
span{text-decoration: underline;} 
P-word1 {font-family: "微软 雅 黑 ";text-indent: 5em;} 
Pp.word2 {font-size: 200%;text-align: center:} 
P.word3 {font-variant:small-caps ; background-color: burlywood:} 
Pp:word4 {font-weight: bolder:color: orangered:} 
</style> 
</head> 


<h1> 使 用 CSS 来 美化 文字 </h1> 

<span> 修 饰 文本 </span> 

<p class="word1">reading makes a full man</p> 

<p class="word2">conference a ready man</p> 

<p class="word3">writing an exact man</p> 

<p class="word4">modesty helps one to go forward</p> 
</body> 
</html> 


正 浏览 器 对 有 些 属性 难以 支持 ， 为 了 展示 出 良好 的 。 [FS 
效果 ， 在 本 单元 中 统一 使 用 谷歌 浏览 器 进行 浏览 。 通过。 | em 
浏览 器 查看 该 HTML 页 面 时 ,其 输出 结果 如 图 3-8 所 示 。 | 使 用 CSS 来 美化 文字 

从 图 中 可 以 看 出 , 通过 Css 对 文字 进行 了 多 方位 的 。 |=* 
美化 ， 包 含 字体 的 选择 、 字 体 大 小 、 字 体 颜色 、 背 景 关 


‘conference a ready man ， 
色 、 字 体 修饰 等 方面 ,大 家 可 以 从 CSS 文档 中 去 学 习 了 
解 这 些 属性 的 功能 和 用 法 。font-family 属性 定义 文本 的 。 | 99 


modesty helps one to go forward 


字体 系列 ， 在 CSS 中 有 2 种 不 同类 型 的 字体 系列 名 称 。 图 3-8 使 用 CSS 美文 字 





1 通用 字体 系列 


CSS 共 定 义 了 5 种 通用 字体 ， 分 别 是 Serif 字体 、Sans-serif 字体 、Monospace 字体 、 
Cursive 字体 、Fantasy 字体 。 


2 ”特定 字体 系列 


本 示例 中 ， 我 们 使 用 font-family 属性 来 定义 文本 的 指定 字体 系列 : 微软 雅 黑 。 
font-size 属性 设置 了 字体 的 大 小 ，font-size 值 可 以 是 绝对 值 或 相对 值 ， 当 值 为 绝对 值 
时 , 需要 将 文本 设置 为 指定 的 大 小 , 不 允许 用 户 在 浏览 器 中 改变 字体 大 小 ; 当 为 相对 值 时， 
需要 我 们 相对 于 周围 的 元 素来 设置 字体 大 小 ， 可 以 在 浏览 器 中 改变 字体 大 小 ， 如 果 没 有 设 
置 字体 大 小 ， 普 通 文本 默认 大 小 是 16 像素 。 
font-variant 属性 设置 小 写字 母 转化 为 大 写字 母 的 小 形 字 体 显 示 ， 也 就 是 所 有 的 小 
写字 母 都 会 转换 为 大 写 ， 但 是 所 有 转换 的 字体 ， 与 其 他 文本 相 比 ， 尺 寸 会 更 小 。 
font-weight 属性 用 来 设置 文本 的 粗细 。 
text-indent 属性 规定 文本 块 中 首 行文 本 的 缩 进 ， 从 图 3-8 中 大 家 可 以 看 到 ， 与 其 他 
文本 相 比 ， 缩 进 了 Sem。 
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text-align 属性 用 来 设置 文本 的 对 齐 方 式 ， 值 有 left、right、center 等 ， 分 别 是 左 对 
齐 、 右 对 齐 、 居 中 对 齐 ， 其 中 左 对 齐 是 默认 值 。 

background-color 属性 定义 的 是 背景 颜色 ，color 属性 定义 的 是 字体 颜色 。 
text-decoration 用 于 向 文本 添加 修饰 ， 值 分 别 是 none、underline 、overline、 
line-through、blink 等 ， 分 别 是 无 修饰 、 文 本 下 有 一 条 横 线 、 文 本 上 有 一 条 横 线 、 
穿 过 文本 一 条 横 线 、 文 本 闪烁 。 其 中 none 是 默认 值 。 


3.3.2 ”美化 网 页 图 片 


在 每 个 网 页 中 ， 我 们 总 是 可 以 看 到 很 多 的 图 片 、 各 种 不 同 的 形状 及 展示 效果 ， 丰 富 了 
页 面 的 内 容 ， 让 每 个 人 更 直观 地 了 解 到 页 面 上 所 呈现 的 内 容 ， 图 文 并 茂 ， 不 会 像 以 前 的 页 
面 那样 仅仅 只 有 一 堆 的 文字 ， 显 得 单调 枯燥 。 这 些 不 同 的 图 片 展示 效果 大 家 自己 就 可 以 通 
过 CSS 技术 呈现 出 来 。 


<html> 

<head> 

<meta charset="UTF-8"> 

<title>CSS 美化 图 片 </title> 

<style type="text/css"> 
img{width: 100px;border: 3px solid red;} 
.fillet {border-radius: 20px:} 
.Oval {border-radius: 5096:} 
.thumb {border: 1px solid #ddd: border-radius: 4px: padding: Spx:} 
.filter {filter: brightness(50%);} 

</style> 

</head> 


<body> 

<h3> 美 化 图 片 </h3> 
<img sre="../img/flh.jpg" alt=" 火 梨花 " /> 
<img class="fillet" sre="../img/flh.jpg" alt=" 火 梨花 " /> 
<img class="oval" src="../img/flh.jpe" alt=" 火 梨花 " /> 
<img class="thumb" src="../img/flhjpe" alt=" 火 梨花 " /> 
<img class="filter" src="../img/flh.jpg" alt=" 火 梨花 " /> 

</body> 

</html> 


正 浏览 器 暂 不 支持 滤 镜 功能 ， 在 谷歌 浏览 器 中 查看 
该 HTML 页 面 ， 其 输出 结果 如 图 3-9 所 示 。 D ssa 
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一 排 第 一 个 图 片 是 未 加 修饰 的 图 片 ， 第 二 个 图 片 使 。 | ee 
用 border-radius 属性 来 进行 修饰 ， 我 们 可 以 看 到 图 片 呈 | 和 km 
国 角 显示 ;第 三 张 图 片 呈现 椭圆 显 示 ;第 二 排 第 一 张 图 
er ee 
为 元 素 添加 可 视 效 果 。 需 要 注意 下 浏览 只 不 支持 议 届 。 | 了 轨 昌国 
性 ， 这 是 图 片 过 滤 后 的 效果 。 每 张 图 片 展示 的 形状 或 状 
态 痢 不 一 样 ,通过 这 些 展示 , 页 面 的 交互 效果 更 加 漂亮 

















图 3-9 使 用 CSS 美化 图 片 
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3.3.3 ”美化 网 页 背景 


有 时 为 了 区 别 网 页 上 的 一 些 元 素 或 者 为 了 使 某 些 元 素 更 加 醒目 ， 我 们 会 添加 一 些 背景 
来 更 好 地 呈现 页 面 想 要 展示 的 内 容 。 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS 美化 背景 </title> 
<style type="text/css"> 
h3 {background-color: cornflowerblue:} 
-imgs {background-image:url(../img/xiaotubiao.png):width:100px;padding:20px; 
background-repeat: repeat;} 
</style> 
</head> 


<body> 
<h3> 国 家 富强 ， 民 族 振兴 ， 人 民 幸 福 。</h3> 
<p class="imgs"> 富 强 、 民 主 、 文 明 、 和 和谐， 自由、 平等、 公正、 法治 ， 爱 国 、 敬 业 、 诚 信 、 
友善 

</p> 

</body> 

</html> 


在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 输出 效果 如 图 3-10 所 示 。 
background-color 属性 用 来 给 文本 设置 背景 颜色 ， 
为 了 页 面 的 美观 、 合 理 ， 可 以 选用 不 同 的 颜色 。 CE 女 攻 
background-image 属性 为 元 素 设置 背景 图 像 。 洪 辣 站 网 XK 全 澡 BE 章 NE  » 
url(“URL”) 指 向 图 像 的 路 径 , background-repeat 属性 用 国家 富强 ， 民 族 振兴 , 人 民 幸 福 ， 站 
于 定义 背景 图 像 是 否 以 及 如 何 重复 ， 值 有 repeat、 
Tepeat-x、repeat-y、no-repeat， 分 别 是 背景 图 片 将 在 垂 
直 和 水 平方 向 重复 、 背 景 图 像 在 水 平方 向 重复 、 背 景 
图 像 在 垂直 方向 重复 、 背 景 图 像 仅 显示 一 次 ， 其 中 
repeat 是 默认 值 。 = 


图 3-10 使 用 CSS 美 化 背景 


3.3.4 ”美化 网 页 边框 


以 前 ， 大 家 都 通过 使 用 表格 来 创建 文本 周围 的 边框 ， 如 今 我 们 却 可 以 使 用 CSS 边框 属 
性 来 创建 出 同样 甚至 更 加 好 看 的 边框 ， 并 且 可 以 应 用 到 任何 元 素 上 。 元 素 边框 就 是 围绕 元 
素 和 内 边 距 的 一 条 或 多 条 线 ， 大 家 可 以 对 边框 的 样式 、 宽 度 、 颜 色 进行 美化 。 

<html> 
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-first{border-style: dashed double solid dotted; border-width: 5px; 
border-color: blue red gold cyan:} 

</style> 

</head> 


<h3>CSS 美化 边框 </h3> 
<p class="first">Nothing is too difficult if you put your heart into 
it</p> 

</body> 

</html> 


在 浏览 器 中 查看 该 HTML 页 面 时 , 其 输出 效果 
如 图 3-11 所 示 。 

border-style 属性 定义 了 边框 的 样式 ， 可 以 定义 中 C | © 127.0.0.1:8020/firstH... 廊 | : 
一 到 多 个 样式 。 当 定义 多 种 样式 时 ， 中 间 用 空格 隔 ”| 于 和 
开 ， 这 里 的 值 默认 采用 的 是 top-right-bottom-left 的 
顺序 ， 也 就 是 上 、 右 、 下 、 左 的 顺序 ， 当 定义 单 边 lt 
样式 时 ， 可 以 使 用 单 边 边框 样式 属性 border-top- 
style、border-right-style、border-bottom-style、border- 
left-style 来 设置 。 

border-width 属性 为 边框 指定 宽度 ,边框 可 以 直接 赋值 ， 比 如 5px 或 2em， 也 可 以 使 用 
thin、medium、thick， 其 中 medium 是 默认 值 。 在 设置 边框 宽度 时 ， 我 们 一 定 要 设置 边框 


图 3-11 使 用 CSS 美 化 边框 


样式 ， 如 果 没 设置 边框 样式 ， 也 就 看 不 到 边框 了 。 对 于 边框 样式 border-style， 它 的 默认 值 
是 none。 所 以 ， 如 果 想 要 看 到 边框 的 出 现 ， 就 必须 设置 一 个 可 见 的 边框 样式 。 

border-color 属性 是 用 来 设置 边框 颜色 的 ， 最 多 可 以 一 次 接受 4 个 颜色 值 ， 值 可 以 是 命 
名 颜色 、 十 六 进 制 、RGB 值 , 边框 默认 颜色 是 我 们 所 声明 的 文本 颜色 。 如 果 边 框 没 有 文本 ， 
那么 这 个 边框 的 颜色 是 父 元 素 的 文本 颜色 ， 父 元 素 可 能 是 body 或 者 其 他 。 


3.3.5 ”美化 网 页 表格 


在 网 页 上 ， 我 们 都 会 看 到 表格 的 呈现 ， 表 格 会 有 各 种 不 同 的 呈现 方式 ， 在 丰富 网 页 内 
容 的 同时 也 使 整个 结构 更 加 合理 ， 更 符合 人 们 的 认 知 。 如 果 还 是 做 成 单纯 的 几 行 几 列 的 表 
格 ， 显 然 已 经 不 太 符合 现代 人 的 审美 要 求 ， 大 家 可 以 使 用 CSS 来 对 表格 进行 美化 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS 美化 表格 </title> 
<style type="text/css"> 
table {border-collapse: collapse: width: 100%:;} 
table,th,td {border: 1px solid blue:} 
th{height: 30px: background-color: powderblue; color: brown:} 
td{text-align: center;padding: 20px;} 
</style> 
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</head> 


<body> 
<table> 


<tr><th> 姓 名 </ 也 ><th> 性 别 </th></tr> 

<tr><td> 雷 军 </td><td> 男 </td></tr> 

<tr><td> 董 明珠 </td><td> 女 </td></tr> 
</table> 


/body> 

</html> 

在 浏览 器 中 查看 该 HTML 页 面 时 , 其 效果 如 图 3-12 
所 示 ， 和 普通 的 表格 进行 对 比 ， 显 得 更 加 美观 漂亮 。 nt 

border-collapse 属性 用 来 设置 是 否 把 表格 边框 合并 。 | ss @@R 党 本 日 王 
成 单一 边框 ， 值 为 separate、collapse， 分 别 是 边框 被 分 | | | 
开 、 边 框 合并 为 一 个 单一 边框 ， 其 中 separate 是 默认 值 ， 于 于 男 
大 家 可 以 根据 需求 进行 相对 应 的 设置 。 








曹 明 珠 玄 














3.3.6 ”美化 网 页 表单 ”图 3-12 使 用 CSS 美化 表格 


表单 在 页 面 的 运用 上 非常 广 ， 通 常 在 进入 网 站 时 ， 大 家 会 发 现 ， 可 以 进行 一 些 浏览 阅 
读 操作 。 如 果 想 要 下 载 某 些 好 的 内 容 ， 就 必须 要 有 账号 才 可 以 去 下 载 ， 这 就 需要 我 们 先进 
行 网 站 注册 、 网 站 登录 等 操作 。 其 实 这 些 页 面 大 多 都 是 以 表单 的 形式 存在 的 ， 因 此 表单 做 
得 是 不 是 漂亮 ,是 大 家 喜欢 上 一 个 网 站 的 第 一 步 ， 所以， 对 于 表单 的 美化 就 显得 尤为 重要 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS 美化 表单 </title> 
<style type="text/css"> 
table {border: 1px solid royalblue:border-radius: 8px:background-color: lightyellow:} td {text-align: 
center;} 
input {background-color: lightblue:} 
.sub {background-color:darkgray:;font-family: "宋体 ":font-size:20px ;} 
‘Tes {background-color: orangered: font-size: 20px;} 
</style> 
</head> 
<body> 
<form name="forml" method="post" action=""> 
<table> 
<tr><td> 姓 名 : </td><td><input type="text" name="username"></td> 
</tr> 
<tr><td> 密 码 : </td> 
<td><input type= "password" name="password"></td></tr> 
<tr><td colspan="2" class="btn"> 
<input class="sub" type="submit" name="commit" value=" 登 录 " /> 
<input class="res" type="reset" name="reset" value=" 重 置 "></td></tr> 
</table></form> 
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</body> 
</html> 


在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 效果 如 图 3-13 所 示 。 

通过 CSS 美化 后 的 表单 , 无 论 是 文本 字体 还 是 表格 
及 按钮 ， 看 起 来 都 显得 更 加 有 型 ， 更 加 立体 化 ， 让 大 家 
情不自禁 地 就 想 先 注册 个 账号 ， 登 录 进 这 个 网 站 去 浏览 
阅读 一 番 。 
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3.3.7 ”美化 网 页 导航 
图 3-13 ”使 用 CSS 美化 表单 
导航 栏 是 现行 主流 网 站 都 必须 具备 的 ， 通 过 导航 栏 ， 我 们 可 以 非常 直观 地 了 解 到 该 网 
站 所 要 表达 的 主要 内 容 ， 对 于 网 站 的 每 个 部 分 大 家 可 以 一 目 了 然 。 能 够 有 一 个 漂亮 的 导航 
条 对 于 每 个 网 站 都 是 非常 重要 的 。 


<html> 

<head> 

<meta charset="UTF-8"> 

<title>CSS 美化 导航 条 </title> 

<style type="text/css"> 
ul{list-style-type: none;margin: 0; padding: 0;} 
li{float: left:} 
ailink,a:visited {display:block:;width:100px:background-color: 
#FF7BO00:;color: white:text-decoration: none;font-weight: bold:} 
a:hover,a:active {background-color:cornflowerblue;} 

</style> 








<li><a href-"CSS 美化 图 片 .html">CSS 美化 图 片 </a></li> 
<li><a hre 人 "CSS 美化 背景 .html">CSS 美化 背景 </a></li> 
<li><a hre 全 "CSS 美化 表单 .html">CSS 美化 表单 </a></li> 
<li><a href="CSS 美化 表格 .html">CSS 美化 表格 </a></li> 
<li><a hre 全 "CSS 美化 文字 .html">CSS 美化 文字 </a></li> 
</ul> 
</body> 
</html> 
在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 效果 如 图 3-14 所 示 。 
当 把 鼠标 悬 停 在 导航 栏 上 时 ， 其 效果 如 图 3-15 所 示 。 
e list-style-type 属性 用 来 设置 列表 项 标记 的 类 型 ，none 是 无 标记 ; disc 是 默认 值 , 是 
实心 圆 标 记 ; circle 为 空心 圆 标记 ; square 是 实心 方块 标记 。 
display 属性 用 来 设置 以 及 如 何 显示 元 素 , 值 为 none 则 不 会 显示 元 素 ; 如 果 为 block， 
则 元 素 显示 为 块 级 元 素 ， 元 素 前 后 会 带 有 换行 符 ; 默认 值 是 inline， 元 素 显示 为 内 
联 元 素 ， 元 素 前 后 无 换行 符 。 
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1277.0.0.1:3020/firstHTMUhtml3/CSS 半 化 家 只 html 


图 3-14 使 用 CSS 美 化 导航 3-15 ”鼠标 悬 停 导航 显示 


当 鼠 标 悬 停 在 导航 栏 中 某 一 项 上 时 ， 大 家 可 以 看 到 其 背景 颜色 改变 了 ， 这 样 展 示 的 导 
航 栏 就 会 非常 醒目 ， 而 且 也 易于 发 现 我 们 目前 所 访问 的 数据 是 哪 一 条 。 











3.3.8 美化 网 页 菜单 


有 网 页 的 地 方 都 会 出 现 导航 栏 ， 有 导航 通常 都 会 有 下 拉 菜 单 ， 下 拉 菜 单 是 对 导航 的 一 
种 补充 ， 更 加 丰富 和 增添 了 导航 的 内 容 。 所 以 ， 下 拉 菜 单 的 重要 性 是 不 言 而 喻 的 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS 美化 菜单 </title> 
<style type="text/css"> 
ul{list-style-type: none;margin: 0; padding: 0:overflow: 
hidden:background-color:gray :} 
lif{float: left:} 
lia, .dropbtn {display: inline-block:color: white:text-align: 
center:padding: 14px 16px:text-decoration: none:} 
li ahover, .dropdown:hover .dropbtn {fbackground-color:green:} 
.dropdown {display: inline-block:} 
.dropdown-content {display: none:position: 
absolute:background-color:darkgray:; 
min-width: 125px:box-shadow: Opx 8px 16px Opx rgba(0.0.0.0.2):} 
.dropdown-content a {color: white;padding: 12px 16px: 
text-decoration: none:display: block:} 
.dropdown-content a:hover {background-color: lightpink:} 
.dropdown:hover .dropdown-content {display: block:} 
</style> 


<li><a hre 全 "CSS 美化 图 片 .html">CSS 美化 图 片 </a></li> 

<li><div class="dropdown"> 

<a href-"CSS 美化 背景 .html">CSS 美化 背景 </a> 

<div class="dropdown-content"> 

<a hre 人 ="#"> 美 化 图 片 </a><a hre 伍 "#'> 美 化 文字 </a> 

<a hre 伍 "#"> 美 化 多 彩色 </a></div></div></li> 

<li><a hre 全 "CSS 美化 表单 .html">CSS 美化 表单 </a></li> 

<li><a href="CSS 美化 表格 .html">CSS 美化 表格 </a></li> 

<li><a hre 全 "CSS 美化 文字 .html">CSS 美化 文字 </a></li> 
<hul> 











使 用 HTML 设 计 商 业 网 站 


edt 
ns - AN 
在 浏览 器 中 查看 该 HTML 页 面 时 ， ee 
其 输出 结果 如 图 3-16 所 示 。 sae 
overflow 属性 用 来 设置 当 内 容 溢出 RE 
元 素 框 时 发 生 的 情况 ， 在 本 案例 中 使 用 ev 
hidden 会 出 现 如 果 内 容 溢出 时 ， 内 容 被 
修剪 并 且 其 余 内 容 不 可 见 ， 值 为 visible 
时 ， 内 容 不 会 被 修剪 ， 会 呈现 在 元 素 框 外 ， 是 默认 值 ; 值 为 auto 时 ， 如 果 内 容 被 修剪 ， 则 
浏览 器 会 显示 滚动 条 以 便 查看 其 余 内 容 ;， 值 为 scroll 时 ， 内 容 会 被 修剪 ， 但 浏览 器 会 显示 
滚动 条 以 便 查 看 其 余 内 容 。 
position 属性 用 来 定位 元 素 ， 这 个 在 后 面 章节 会 讲 到 。 
box-shadow 属性 是 为 了 向 边框 添加 一 个 或 多 个 阴影 ， 语 法 格式 为 : 
box-shadow:h-shadow v-shadow blur spread color insert: 
其 中 h-shadow 和 v-shadow 是 必 选 项 ,其余 都 是 可 选项 ,h-shadow 和 v-shadow 分 别 是 
水 平和 垂直 阴影 的 位 置 ， 可 以 是 负 值 ; blur 是 模糊 距离 ;， spread 是 阴影 的 尺寸 ，color 是 阴 
影 的 颜色 ，insert 可 以 将 外 部 阴影 改 为 内 部 阴影 。 


3-16 使 用 CSS 美化 网 页 菜单 


3.4 将 CSS 应 用 于 网 页 


根据 样式 代码 的 位 置 不 同 ， 可 以 将 样式 分 为 三 类 : 
行内 样式 表 
内 部 样式 表 
外 部 样式 表 


3.4.1 行内 样式 表 


如 果 希 望 某 段 文字 和 其 他 段落 文字 的 显示 风格 不 一 样 ， 那 么 采用 “行内 样式 ”比较 
合适 。 

行内 样式 使 用 元 素 标签 的 STYLE 属性 定义 ， 例 如 ， 两 段 文字 需要 采用 不 同 的 字体 显 
示 ， 如 图 3-17 所 示 ， 则 可 在 标签 内 加 上 
style 属性 ， 如 下 所 示 。 

<html> 洪 区 用 尖 百度 加 OA# 纺 

本 庐山 美景 一 小 天 池 

es 小 天 池 位 于 庐山 乱 内 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 泗 。 池 后 山 

</head> 湖上 ,由 立 着 一 座 白 湛 似 的 嘲 嘛 诬 。 堪 建 于 1936 年 。 小 天 池 山 对 面 还 

二 有 一 公 石 ， 远 扎 似 一 奴 记 伸 预 陶 哆 

DSC rnb Da is 图 3-17 行内 样式 表示 例 
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小 天 池 </p> 
<p style="font-weight:bold"> 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 润 。 池 后 山 
站 上 屹立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 雄 座 伸 
颈 和 欲 鸣 。 
<p> 
</body> 
</html> 


从 上 面 的 示例 可 以 看 出 ， 行 内 样式 就 是 修饰 某 个 标签 ， 规 定 的 样式 只 对 所 修饰 的 标签 
有 效 。 如 此 例 中 分 别 规定 了 两 个 <P> 标 签 的 样式 。 

这 种 方法 简单 有 效 ， 适 合 于 单个 标签 。 但 是 ， 如 果 有 许多 同类 的 标签 ， 如 都 是 <P> 标 
签 ， 希 望 采用 同一 样式 ， 那 么 ， 如 果 在 每 个 <P> 标 签 内 都 加 上 重复 的 样式 代码 ， 将 比较 麻 
烦 。 这 时 可 以 采用 内 峰 样 式 ， 即 把 样式 统一 放置 在 <HEAD> 标 签 内 。 


3.4.2 ”内 部 样式 表 


内 部 样式 表 ( 内 峰 样 式 表 ) 也 称 为 嵌入 样式 表 ， 它 放置 在 <HEAD> 标 签 内 ， 格 式 如 下 : 


其 中 ，<STYLE>、</STYLE> 分 别 代表 样式 的 开始 和 结束 。 
定义 好 某 个 标签 [如 <p>) 的 样式 后 ， 所 有 同类 的 标签 (如 <p>) 都 将 采用 该 样式 。 


3.4.3 ”外 部 样式 表 


无 论 是 行内 样式 还 是 内 顽 样 式 ， 都 实现 了 在 同一 个 网 页 内 ， 各 个 标签 可 以 采用 自己 希 
望 的 样式 。 但 这 远 远 不 够 ， 因 为 在 开发 网 站 时 ， 可 能 希望 整个 网 站 的 所 有 网 页 都 采用 同一 
样式 ， 这 怎么 办 呢 ? 你 肯定 想到 了 ， 把 这 些 样式 从 <HEAD> 标 签 中 提取 出 来 ， 放 入 一 个 单 
独 的 文件 ， 然 后 和 每 个 网 页 关联 不 就 可 以 了 吗 ? 完全 正确 ， 这 就 是 外 部 样式 表 。 

根据 样式 文件 与 网 页 的 关联 方式 ， 外 部 样式 表 可 分 为 两 种 : 链接 外 部 样式 表 和 导入 样 
式 表 。 


1. 链接 外 部 样式 表 


链接 外 部 样式 表 是 指 通过 HTML 的 LINK 标签 ， 把 样式 文件 和 网 页 建立 关联 ， 而 这 个 
<LINK> 标 签 必须 放 到 页 面 的 <HEAD> 区 域内 ， 其 语法 格式 如 下 : 


<head> 
<link rel="stylesheet" type="text/css" hre 合 "样式 表 文 件 .css" 
</head> 


在 该 语法 中 ， 浏 览 器 以 文档 格式 从 样式 表 文 件 中 读 出 定义 的 样式 表 。Rel="stylesheet" 
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是 指 在 页 面 中 使 用 的 是 外 部 样式 表 ; type="textcss" 是 指 文件 的 类 型 是 样式 表 文 本 ，href 参 
数 用 来 指定 文件 的 地 址 ， 可 以 是 绝对 地 址 或 相对 地 址 。 

具体 创建 步骤 如 下 所 示 。 

(1) 创建 外 部 样式 表 文 件 : 新 建文 本 文档 ， 把 以 前 写 在 <ZHEAD> 中 的 样式 规则 写 入 这 
个 文件 即 可 ， 保 存 时 以 .css 为 扩展 名 ， 假 设 取 名 为 mystyle.css。 

mystyle.css 文件 的 代码 如 下 。 


(2) 把 样式 文件 和 网 页 关联 :假定 某 个 网 站 中 的 3-8.html 和 3-9.html 网 页 都 引用 
mystyle.css 样式 表 。 其 代码 如 下 。 
3-8.html 文件 : 


<html> 
<head> 引用 外 部 样式 表 文 件 mystyle.css 
<title> 外 部 样式 表示 例 </title> 


<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 


<body> 

<p>HTML 语言 是 制作 网 页 的 基础 语言 

<p class="text"> 作 为 一 个 网 页 制作 爱好 者 或 者 专业 的 网 页 设计 师 ，HTML 语言 知识 是 不 可 或 缺 的 。 
</body> 


Shtml> | 采用 mystyle css 文件 中 规定 的 <p> 链 接 样式 显示 


在 浏览 器 中 查看 该 页 面 时 ， 输 出 结果 
如 图 3-18 所 示 。 

3-9.html 文件 : 

ep HTML 语 言 是 制作 网 页 的 基础 语言 

<head> 

<title> 外 部 样式 表示 例 </title> 

<link rel="stylesheet" type="text/css" 3-18 ”外 部 样式 表示 例 

href="mystyle.css" /> 
</head> 








<body> 
<h3> 轩 辕 剑 三 外 传 ， 天 之 痕 </h3> 
<hr> 

<p class="text">&nbsp;&nbsp;&nbsp;&nbsp; 神 州 大 地 上 ， 从 神话 时 代 流 传 下 来 十 种 上 十 神器 一 一 
钟 、 剑 、 斧 、 谈 、 塔 、 琴 、 鼎 、 印 、 镜 、 石 。 它 们 各 自 有 着 凶 然 不 同 的 绝世 力量 。 只 要 稍 加 利用 即 
可 纵横 四 海 ， 无 敌 天 下 。 但 它们 的 下 落 ， 已 潭 灭 于 神州 漫长 之 乱世 历史 中 。 
<p>&nbsp:&nbsp:&nbsp:&nbsp: 除 了 轩辕 剑 ， 还 有 创 世 神 开天辟地 使 用 的 神器 炼 妖 壹 ， 在 上 古 英雄 
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的 手中 思 转 流传 ， 在 这 些 古人 的 庇 估 下 ， 中 国 到 了 文化 易 盛 的 时 代 一 一 隋唐 。 
</body> 
</html> 


在 浏览 器 中 查看 该 页 面 时 ， 输 出 结果 如 图 3-19 所 示 





© |© 12700.1:3020/mrstHTMU/ Mm /2 html?_Nbt=15241943239092 
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轩辕 剑 三 外 传 : 天 之 端 


除了 轩辕 剑 ， 还 有 创 世 神 开天辟地 使 用 
的 神器 炼 妖 壶 ， 在 上 古 英雄 的 手中 轿 转 流传 ， 在 
全 中 国 到 了 文化 易 盛 的 时 代 
一 一 隋唐 。 
图 3-19 外 部 样式 表示 例 


2. 导入 样式 表 


在 网 页 中 ， 还 可 以 使 用 @import 方 法 导入 样式 表 ， 其 格式 如 下 。 


<head> 

<style type="text/css"> 

@import 样式 表 文 件 .css 

选择 器 {样式 属性 : 取 值 ， 样 式 属性 ， 取 值 ，.….} 


上 在 使 用 时 ， 需要 注意 的 是 导入 外 部 样式 表 , 也 就 是 @import 声明 必须 在 样式 表 定 义 | | 
. 的 开始 部 分 ， 而 其 他 样式 表 的 定义 都 要 在 @import 声明 之 后 。 | 


【单元 小 结 】 


e 样式 表 由 样式 规则 组 成 ， 这 些 规则 告诉 浏览 器 如 何 显示 文档 。 样 式 表 是 将 样式 (如 
字体 、 颜 色 、 字 号 等 ) 添 加 到 网 页 中 的 简单 机 制 。 

e 样式 表 包 括 选择 器 和 样式 规则 ， 选 择 器 又 分 为 元 素 选择 器 、CLASS 选择 器 和 ID 
选择 器 。 

e 根据 样式 代码 的 位 置 不 同 ， 可 以 将 样式 分 为 三 类 : 行内 样式 表 、 内 部 样式 表 和 外 
部 样式 表 。 
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【单元 自 测 】 


1.( “”) 属 性 指定 字体 样式 为 ， 正常 、 斜 体 和 偏 斜体 。 
A. font style B. font family 
C. line height D. font designer sight 
. 要 链接 到 外 部 样式 表 mystyle.css， 下 列 代码 正确 的 是 (。”)。 
A. <head><link rel="mystyle.css" ...></head> 
B. <head><link href="mystyle.css"></head> 
C. <head><style><link rel="mystyle.css" ...></style></head> 


D. <head><style><link href="mystyle.css" ...></style></head> 
3. 为 了 在 网 页 中 将 HI 标题 定位 于 左边 距 为 100px、 上 边 距 为 50px 处 ,效果 如 图 3-20 


所 示 ， 下 面 代码 正确 的 是 ( 
A. 
hf 


€ 3 © |© 12700180zo/rsthTMUh… 女 | : 
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将 H1 标 题 定位 
图 3-20 HI 标题 定位 


4. 在 样式 表 中 ( 。”) 属 性 设置 文本 框 的 边框 粗细 。 
A. border B. border-style C. border-size D. border-width 


5. 下 列 哪 一 项 是 box-shadow 属性 的 必 备 元 素 (  )。 
A. color B. insert C. v-shadow D.blur 


【上 机 实战 】 


上 机 目标 


se。 使 用 行内 样式 表 、 内 嵌 样 式 表 、 外 部 样式 表 及 其 关联 
。 对 表单 元 素 使 用 样式 表 
e 使 用 层 
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上 机 练习 


练习 1: 第 一 个 程序 

【问题 描述 】 

对 表单 元 素 中 的 文本 框 和 按钮 应 用 样式 ， 改 变 文本 框 的 边框 颜色 和 文字 颜色 ， 并 将 按 
钮 的 字体 变 大 。 


【问题 分 析 】 
对 按钮 的 字体 使 用 行内 样式 表 ， 定 义 一 个 类 选择 器 。 
参考 代码 : 


<input name="Submit" type="submit" value=" 提 交 " style="font-size:20px:"> 
<input type="submit" name="Submit" value=" 重 填 " style="font-size:20px:"> 
</p> 
</form> 


</body> 
</html> 


输出 结果 如 图 3-21 所 示 。 
练习 2: 样式 的 混合 使 用 


【问题 描述 】 
要 求 使 用 外 部 样式 表 、 行 内 样式 表 、 内 广 样 式 表 完 。 ”图 3-21 对 表单 元 素 使 用 样式 
成 下 面 的 网 页 设计 。 
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【问题 分 析 】 

编写 newstyle.css 样式 表 ， 然 后 在 HTML 页 面 文件 中 为 相应 的 元 素 添加 样式 。 
参考 代码 : 

newstyle.css 代码 如 下 所 示 。 


pl 
人 设置 段落 <P> 的 样式 : 字体 和 背景 色 */ 
font-family: System 
font-size: 18px; 
color: #FFOO0CC: 
vy 
bi{ 
* 设 置 <H2> 的 样式 背景 色 和 对 齐 方式 */ 
background-color: #CCFF33; 
text-align: center; 
} 


al 
/# 设 置 超 链接 不 带 下 划 线 ，textrdecoration 表示 文本 修饰 */ 
color: blue; 
text-decoration: none; 


} 

aihover { 。 /# 鼠 标 指针 在 超 链接 上 悬 停 ， 带 下 划 线 对 
color: red; 
text-decoration:underline; 

} 

HTML 页 面 文 件 代码 如 下 所 示 。 


<html> 

<head> 

<title> 样 式 的 混合 使 用 </title> 

<link href="newstyle.css" rel="stylesheet" type="text/css"> 
</head> 


<body> 

<h2><IMG src="001.gif' width="180" height="150"> 
<br> 

各 种 惊喜 等 你 拿 </h2> 

<ul> 


<li><a hre 全 "firsthtm"> 惊 喜 第 一 重 : Q 宏 圣 诞 福 </a></li> 

<li><a hre 全 "second.htm"> 惊 喜 第 二 重 : 圣诞 礼包 大 抢购 </a></li> 

<li><a hre 全 "third.htm"> 惊 喜 第 三 重 : Q 宏 温 声 送 祝福 </a></li> 
</ul> 
<h4> 圣 诞 礼包 大 抢购 </h4> 
<p style=" font-size:14; font-style:italic; color: #00FF00 ">[ 摘 要 ]<br/> 
诞 旦 相连 献 好 礼 ，Q 宠 社 区 为 您 精心 准备 一 批 诞 旦 大 礼包 ， 内 容 丰 富 。 购 买 礼包 的 同时 ， 还 可 获 
得 圣诞 礼盒 一 只 。 您 可 以 选择 将 圣诞 礼盒 送 给 您 的 好 友 ， 让 他 /她 分 享 圣诞 的 喜悦 ! </p> 
<p> 圣 诞 树 下 有 3 种 诞 旦 礼包 大 抢购 ， 面 值 分 别 为 3Q 币 、5Q 币 、10Q 币 ， 以 满足 您 的 不 同 需求 。 
每 次 购买 礼包 可 获得 圣诞 礼盒 一 只 ， 礼 盒 中 包含 的 物品 是 随机 的 ， 均 为 没有 出 售 的 神秘 物品 。 当 
然 ， 选 择 越 贵 的 礼包 ， 得 到 的 礼盒 价值 也 越 高 哦 ! </p> 


</body> 
</html> 
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上 述 代码 的 运行 结果 如 图 3-22 所 示 。 
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图 3-22 样式 的 混合 使 用 


令 第 二 阶段 多 


练习 3: 利用 CSS 的 属性 实现 图 示 的 效果 


【问题 描述 】 
对 标签 设置 属性 ， 需 要 设 定 的 属性 值 有 top、left， 如 图 3-23 所 示 。 
IIE 
襄 使 用 CSS 属 性 
C |© 12700.1: t 人 |: 
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学 习 CSS 属 性 


标题 在 文档 项 部 下 面 100px 处 ， 目 在 文档 左 侧 让 全 ee 
段落 在 文档 项 部 下 面 200px 处 ， 且 在 文档 左 侧 边缘 


图 3-23 使 用 CSS 属性 


























【拓展 作业 】 


1. 使 用 行内 样式 表 实现 如 图 3-24 所 示 的 效果 ， 图 中 对 最 下 面 的 一 段 话 应 用 了 行内 样式 。 
2. 使 用 ID 选择 器 实现 如 图 3-25 所 示 的 效果 。 

3. 使 用 样式 表 和 层 实现 如 图 3-26 所 示 的 效果 。 

4. 使 用 样式 表 和 表格 (或 层 ) 实 现 如 图 3-27 所 示 的 效果 。 
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抢购 最 便宜 MP3 


剩余 时 间 : 成 交 
新 旧 程 订 ， 8 成 新 


[en 
€ 3 CG [© 127.00.1:8020/firstHTML/html3/ 丘 居 练 -. 
中 应 有 沼 百 克 目 OA 系统 


























的 人 让 二 全 其 在 全 者 
为 企业 创造 高 缚 效 ， 归根 究 底 是 


质 的 组 合 。 一 个 人 的 于 质 就 好 比 
动机 、 个 人 品质 以 及 价值 观 lL 


技 知 六 
藏 在 水 面 以 下 ， 
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图 3-27 样式 表 和 表格 的 使 用 











垦 了 于 DIV+CSS 的 网 页 
布局 与 定位 
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他 户 币 丰 
DIV+CSS 网 页 布局 一 直 以 来 都 是 CSS 制作 网 站 的 精华 ， 一 个 好 的 网 站 多 半 是 由 于 其 
合理 且 有 意义 的 布局 而 使 得 网 站 更 具 表 现 力 。 


4.1 理解 表现 和 结构 分 离 
对 于 初学 者 ， 我 们 常 看 见 web 标准 的 好 处 之 一 是 “能 做 到 表现 和 结构 相 分 离 ”， 这 到 


底 是 什么 意思 呢 ? 下 面 以 一 个 实际 的 例子 来 详细 说 明 。 首 先 我 们 必须 明白 一 些 基 本 的 概念 : 
内 容 、 表 现 、 结 构 。 


什么 是 内 容 、 表 现 、 结 构 


内 容 就 是 页 面 实际 要 传达 的 真正 信息 ， 包 含 数据 、 文 档 或 者 图 片 等 。 注 意 这 里 强调 的 
“真正 ”， 是 指 纯粹 的 数据 信息 本 身 。 例 如 ， 一 个 不 包含 辅助 的 信息 ， 导 航 菜单 、 装 饰 性 
图 片 等 。 举 个 例子 ， 下 面 这 段 文本 是 页 面 要 表现 的 信息 。 

忆 江 南 (1) 唐 .白居易 江南 好 ， 风 景 旧 曾 谱 。(2) 日 出 江 花红 胜 火 ， 春 来 江水 绿 如 蓝 ，(3) 
能 不 忆 江 南 ? 作者 介绍 772 - 846， 字 乐天 ， 太 原 ( 今 属 山西 ) 人 。 唐 德 宗 朝 进士 ， 元 和 三 年 
(808) 拜 左 拾遗 ， 后 贬 江 州 ( 今 属 江西 ) 司 马 ， 移 患 州 ( 今 必 四川) 刺史 ， 又 为 苏州 ( 今 属 江苏 )、 
同 州 ( 今 属 陕西 大 荔 ) 刺 史 。 晚 居 洛 阳 ， 自 号 醉 吟 先生 、 香 山居 士 。 其 诗 政治 倾向 鲜明 ， 重 
讽 喻 ， 尚 坦 易 ， 为 中 唐 大 家 。 也 是 早期 词 人 中 的 佼佼 者 ， 所 作对 后 世 影 响 其 大 。 注 释 (1) 据 
《乐府 杂 录 》， 此 词 又 名 《 谢 秋 娘 》， 系 唐 .李德裕 为 亡 姬 谢 秋 娘 所 作 ， 又 名 《 望 江南 》、《 梦 
江南 》 等 。 分 单调 、 双 调 两 体 ， 单 调 二 十 七 字 ， 双 调 五 十 四 字 ， 涡 平 韵 。(2) 说 ( 音 安 ): 熟 
悉 。(3) 蓝 : 蓝 草 ， 其 叶 可 制 青绿 染料 。 品 评 此 词 写 江南 春色 ， 首 句 “ 江 南 好 ”， 以 一 个 既 
浅 切 又 圆 活 的 “好 ” 字 ， 道 尽 江 南 春 色 的 种 种 佳境 ， 而 作者 的 赞颂 之 意 与 向 往 之 情 也 尽 富 
其 中 。 同时， 唯 因 “好 ”之 已 其 , 方 能 “ 忆 ” 之 不 休 ， 因 此 ， 此 和 句 又 以 问 语 结 句 “ 能 不 忆 
江南 ? ”， 并 与 之 相关 合 。 次 名 “风景 旧 曾 请 >”， 点 明江 南 风景 之 “好 ”， 并 非得 之 传闻 ， 而 
是 作者 出 牧 杭州 时 的 亲身 体验 与 感受 。 这 就 既 落 实 了 “好 ” 字 ， 又 照应 了 “ 忆 ” 字 ， 勾勒 
了 一 幅 颇 为 美妙 的 精彩 和 画面 。 三 、 四 两 身 对 江南 之 “好 ”进行 了 形象 化 的 演绎 ， 突 出 泻 染 
江 花 、 江 水 红 绿 相映 的 明艳 色彩 ， 给 人 以 光彩 夺目 的 强烈 印象 。 其 中 ， 既 有 同色 间 的 相互 
烘托 , 又 有 异 色 间 的 相互 映衬 , 充分 显示 了 作者 善于 着 色 的 技巧 . 篇 未 , 以 “能 不 忆 江 南 ? ” 
收 束 全 词 ， 既 寄托 出 生 在 洛阳 的 作者 对 江南 春色 的 无 限 殉 叹 与 怀念 ， 又 造成 一 种 悠远 而 又 
深长 的 韵味 ， 把 读者 带 入 余 情 摇 泣 的 境界 中 。 
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2. 结构 


可 以 看 到 上 面 的 文本 信息 本 身 已 经 完整 ， 但 是 混乱 一 团 ， 难 以 阅读 和 理解 。 我 们 必须 
把 它 格 式 化 一 下 ， 分 成 标题 、 作 者 、 章 、 节 、 段 落 和 列表 等 。 


标题 忆 江 南 (1) 

作者 唐 . 白 居 易 

下 交 

江南 好 ， 风 景 旧 曾 请。(2) 

日 出 江 花 红 胜 火 ， 春 来 江水 绿 如 蓝 ，(3) 

能 不 忆 江 南 ? 

节 1 作者 介绍 

772 - 846， 字 乐天 ， 太 原 ( 今 属 山西 ) 人 。 唐 德 宗 朝 进士 ， 元 和 三 年 (808) 拜 左 拾遗 ， 后 
贬 江 州 ( 今 属 江西 ) 司 马 ， 移 忠 州 ( 今 属 四 川 ) 刺 史 ， 又 为 苏州 ( 今 属 江苏 )、 同 州 ( 今 属 陕西 大 荔 ) 
刺史 。 晚 居 洛阳 ， 自 号 醇 吟 先生 、 香 山居 士 。 其 诗 政治 倾向 鲜明 ， 重 讽 喻 ， 尚 坦 易 ， 为 中 
唐 大 家 。 也 是 早期 词 人 中 的 佼佼 者 ， 所 作对 后 世 影响 甚 大 。 

节 2 注释 

列表 

(1) 据 《 乐 府 杂 录 》， 此 词 又 名 《 谢 秋 娘 》， 系 唐 。 李 德 裕 为 亡 姬 谢 秋 娘 所 作 ， 又 名 《 望 
江南 》、《 梦 江南 》 等 。 分 单调 、 双 调 两 体 ， 单 调 二 十 七 字 ， 双 调 五 十 四 字 ， 沸 平 韵 。 

(2) 语 ( 音 安 ): 熟悉 。 

(3) 蓝 : 蔓草 ， 其 叶 可 制 青 绿 染料 。 

节 3 品评 

此 词 写 江南 春色 ， 首 名 “江南 好 ”， 以 一 个 既 浅 切 又 圆 活 的 “好 ” 字 ， 道 尽 江南 春色 
的 种 种 佳境 ， 而 作者 的 赞颂 之 意 与 向 往 之 情 也 尽 寅 其 中 。 同 时 ， 唯 因 “ 好 ”之 已 甚 ， 方 能 
“ 忆 ” 之 不 体 ， 因 此 ， 此 各 又 以 问 语 结 名 “能 不 忆 江 南 ? ”， 并 与 之 相关 合 。 次 名 “风景 旧 
曾 说 ”， 点 明江 南 风 景 之 “好 ”， 并 非得 之 传闻 ， 而 是 作者 出 牧 杭州 时 的 亲身 体验 与 感受 。 
这 就 虐 落 实 了 “好 ” 字 ， 又 照应 了 “ 忆 ” 字 ,勾勒 了 一 幅 颇 为 美妙 的 精彩 画面。 三 、 四 两 
名 对 江南 之 “好 ”进行 了 形象 化 的 演绎 ， 突 出 泻 染 江 花 、 江 水 红 绿 相映 的 明艳 色彩 ， 给 人 
以 光彩 夺目 的 强烈 印象 。 其 中 ， 既 有 同色 间 的 相互 烘托 ， 又 有 异 色 间 的 相互 映衬 ， 充 分 显 
示 了 作者 善于 着 色 的 技巧 。 篇 末 ， 以 “能 不 忆 江 南 ?” 收 束 全 词 ， 既 寄托 出 身 在 洛阳 的 作 
者 对 江南 春色 的 无 限 赞 叹 与 怀念 ， 又 造成 一 种 悠远 而 又 深长 的 韵味 ， 把 读者 带 入 余 情 摇 泣 
的 境界 中 。 


3. 表现 


虽然 定义 了 结构 ， 但 是 内 容 还 是 原来 的 样式 没有 改变 ， 例 如 ， 标 题字 体 没有 变 大 ， 正 
文 的 颜色 也 没有 变化 ， 没 有 背景 ， 没 有 修饰 。 所 有 这 些 用 来 改变 内 容 外 观 的 东西 ， 我 们 称 
之 为 “表现 ”。 将 上 面 的 文本 用 表现 处 理 后 的 效果 如 图 4-1 所 示 。 

很 明显 ， 我 们 加 了 两 种 背景 ， 将 标题 字体 变 大 并 居中 ， 将 小 标题 加 粗 并 变 成 红色 等 。 
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所 有 这 些 ， 都 是 “表现 ”的 作用 。 它 使 内 容 看 上 去 漂亮 、 可 爱 多 了 ! 有 个 形象 的 比喻 : 内 
容 是 模特 ， 结 构 标 明 头 和 四 肢 等 各 个 部 位 ， 表 现 则 是 服装 ， 将 模特 打扮 得 漂 漂亮 亮 。 


亿 江 南 (D 





作者 唐 白 号 易 


4-1 使 用 <DIV> 标 签 


4.1.2 DIV 与 CSS 结合 的 优势 


1. 表现 和 内 容 相 分 离 


将 设计 部 分 剥离 出 来 放 在 一 个 独立 样式 文件 中 ，HTML 文件 中 只 存放 文本 信息 ， 这 符 
合 W3C 标准 。 微 软 等 公司 均 为 W3C 支持 者 ， 这 一 点 是 最 重要 的 ， 因 为 这 可 以 保证 用 户 的 
网 站 不 会 因为 将 来 网 络 应 用 的 升级 而 被 淘汰 。 


2. 提高 搜索 引擎 对 网 页 的 索引 效率 

用 只 包含 结构 化 内 容 的 HTML 代 蔡 嵌 套 的 标签 , 搜索 引擎 将 更 有 效 地 搜索 到 用 户 的 网 
页 内 容 ， 并 可 能 给 用 户 一 个 较 高 的 评价 。 

3. 代码 简洁 ， 提 高 页 面 浏览 速度 


对 于 同一 个 页 面 视觉 效果 , 采用 CSS+DIV 重 构 的 页 面容 量 要 比 TABLE 编码 的 页 面 文 
件 容量 小 得 多 ,代码 会 更 加 简洁 ,前 者 一 般 只 有 后 者 的 一 半 大 小 。 对 于 一 个 大 型 网 站 来 说 ， 
可 以 节省 大 量 带宽 ， 并 且 支 持 浏览 器 的 向 后 兼容 。 也 就 是 说 ， 在 未 来 的 浏览 器 大 战 中 ， 胜 
利 的 无 论 是 下 还 是 火狐 ， 您 的 网 站 都 能 很 好 地 兼容 。 


4. 易于 维护 和 改版 


内 容 和 样式 的 分 离 ， 使 页 面 和 样式 的 调整 变 得 更 加 方便 。 你 只 要 简单 地 修改 几 个 CSS 
文件 就 可 以 重新 设计 整个 网 站 的 页 面 。 现 在 ，YAHOO、MSN 等 国际 门户 网 站 ， 网 易 、 新 
浪 等 国内 门户 网 站 ， 以 及 主流 的 Web 网 站 ， 均 采用 DIV+CSS 的 框架 模式 ， 更 加 印证 了 
DIV+CSS 是 大 势 所 趋 。 
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4.1.3 怎么 改善 现 有 的 网 站 


大 部 分 的 设计 师 依 旧 在 采用 传统 的 表格 布局 、 表 现 与 结构 混杂 在 一 起 的 方式 来 建设 网 
站 。 学 习 使 用 XHTML+CSS 的 方法 需要 一 个 过 程 , 使 现 有 网 站 符合 网 站 标准 也 不 可 能 一 步 
到 位 ， 最 好 的 方法 是 循序 渐进 ， 分 阶段 来 逐步 达到 完全 符合 网 站 标准 的 目标 。 如 果 用 户 是 
新 手 ， 或 者 对 代码 不 是 很 熟悉 ， 也 可 以 采用 遵循 标准 的 编辑 工具 ， 如 HBuilder， 它 是 目前 
支持 CSS 标准 非常 完善 的 工具 。 


1. 初级 改善 


1) 为 页 面 添加 正确 的 DOCTYPE 

很 多 设计 师 和 开发 人 员 都 不 知道 什么 是 DOCTYPE, DOCTYPE 有 什么 用 。DOCTYPE 
是 document type 的 简写 ， 主 要 用 来 说 明 用 户 用 的 XHTML 或 者 HTML 是 什么 版 本 。 浏 览 
器 根据 DOCTYPE 定义 的 DTD( 文 档 类 型 定义 ) 来 解释 页 面 代码 。 所 以 ， 一 旦 不 注意 设置 了 
错误 的 DOCTYPE， 结 果 会 让 你 大 吃 一 惊 。XHTML 1.0 提供 了 3 种 DOCTYPE 供 选 择 。 

(1) 过 渡 型 (Transitional)。 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http//www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


(2) 严格 型 (Stricb 。 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 

(3) 框架 型 (Frameset)。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http:J/www.w3.ore/TR/xhtmll/DITD/xhtmll-frameset.dtd"> 

初级 改善 ， 只 要 选用 过 渡 型 的 声明 就 可 以 了 , 它 依然 可 以 兼容 表格 布局 、 表 现 标识 等 ， 

不 至 于 让 用 户 觉得 变化 太 大 ， 难 以 掌握 。 

2) 设 定 一 个 名 字 空 间 (Namespace) 

直接 在 DOCTYPE 声明 后 面 添加 如 下 代码 : 

<html xmlns="http//www.w3.org/1999/xhtml" > 


namespace 是 收集 元 素 类 型 和 属性 名 字 的 一 个 详细 的 DTD，namespace 声明 允许 用 户 通 
过 一 个 在 线 地 址 指向 来 识别 用 户 的 namespace， 只 要 照样 输入 代码 即 可 。 

3) 声明 用 户 的 编码 语言 

为 了 被 浏览 器 正确 解释 和 通过 标识 校 验 ， 所 有 的 XHTML 文档 都 必须 声明 它们 所 使 用 
的 编码 语言 。 代 码 如 下 : 

<meta http-equiv="Content-Type" content="text/html: charset=GB2312" /> 

这 里 声明 的 编码 语言 是 简体 中 文 GB2312， 如 果 用 户 需要 制作 繁体 内 容 ， 可 以 定义 为 
BIG5。 
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4) 用 小 写字 母 书写 所 有 的 标签 

XML 对 大 小 写 是 敏感 的 ， 所 以 ，XHTML 也 是 有 大 小 写 区 别 的 。 所 有 的 XHTML 元 素 
和 属性 的 名 字 都 必须 使 用 小 写 ， 否 则 你 的 文档 将 被 W3C 校 验 认为 是 无 效 的 。 例 如 下 面 的 代 
码 是 不 正确 的 : 

<TITLE> 公 司 简 介 </TITLE> 

正确 的 写法 是 : 

<title> 公 司 简 介 </title> 

同样 地 ，<P> 改 成 <p>，<B> 改 成 <b> 等 ， 这 步 转换 很 简单 。 

5) 为 图 片 添 加 alt 属性 

为 所 有 图 片 添加 alt 属性 。alt 属性 指定 了 当 图 片 不 能 显示 的 时 候 就 显示 替换 文本 ， 这 
样 做 对 正常 用 户 可 有 可 无 ,但 对 纯 文 本 浏览 器 和 使 用 屏幕 阅读 器 的 用 户 来 说 是 至 关 重 要 的 。 
只 有 添加 了 alt 属性 ， 代 码 才 会 被 W3C 正确 性 校 验 通过 。 值 得 注意 的 是 ， 我 们 要 添加 有 意 
义 的 alt 属 性 ， 像 下 面 这 样 的 写法 毫 无 意义 。 

<img src="logo_unc 120x30.gif" alt="logo unc 120x30.gif'> 

正确 的 书写 如 下 : 

<img src="logo_ unc 120x30.gif' alt="UNC 公司 标志 ， 单 击 返 回首 页 "> 


6) 给 所 有 属性 值 加 引号 

在 HIML 中 , 你 可 以 不 给 属性 值 加 引号 , 但 是 在 XHTML 中, 它们 必须 加 引号 。 例 如: 
可 以 是 height="100"， 而 不 能 是 height=100。 

7) 关闭 所 有 的 标签 

在 XHTML 中 ， 每 一 个 打开 的 标签 都 必须 关闭 ， 如 下 所 示 : 


<p> 每 一 个 打开 的 标签 都 必须 关闭 。</p> <b>HTML 可 以 接受 不 关闭 的 标签 ，XHTML 就 不 可 以 。 

</b> 

这 个 规则 可 以 避免 HTML 的 混乱 和 麻烦 。 举 例 来 说 : 如 果 用 户 不 关闭 图 像 标签 ， 在 一 
些 浏览 器 中 就 可 能 出 现 CSS 显示 问题 。 用 这 种 方法 能 确保 页 面 和 用 户 设计 的 显示 一 样 。 需 
要 说 明 的 是 : 空 标签 也 要 关闭 ， 在 标签 尾部 使 用 一 个 正 斜 杠 “/” 来 关闭 它们 即 可 。 例 如 : 

<br 记 

<img src="webstandards.gif" /> 

经 过 上 述 7 个 规则 处 理 后 ， 页 面 就 基本 符合 XHTML 1.0 的 要 求 了 ， 但 我 们 还 需要 校 验 一 下 是 
否 真 的 符合 标准 。 我 们 可 以 利用 W3C 提供 的 免费 校 验 服务 (http://validator.w3.org/), 发 现 错误 后 逐 
个 修改 。 在 后 面 的 资源 列表 中 我 们 也 提供 了 其 他 校 验 服务 和 对 校 验 进 行 指 导 的 网 址 ， 可 以 
作为 W3C 校 验 的 补充 。 如 果 最 后 通过 了 XHTML 验证 ,恭喜 你 已 经 向 网 站 标准 迈 出 了 一 
大 步 。 不 是 想象 中 的 那么 难 吧 ! 


2. 中 级 改善 
中 级 改善 主要 在 结构 和 表现 相 分 离 上 ， 这 一 步 不 像 第 一 步 那么 容易 实现 ， 我 们 需要 观 
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念 上 的 转变 ， 以 及 对 CSS 技术 的 学 习 和 运用 。 但 学 习 任 何 新 知识 都 需要 花 点 时 间 ， 雇 窃 在 
于 边 做 边 学 。 假 如 用 户 一 直 采 用 表格 布局 ， 根 本 没 用 过 CSS， 也 不 必 急 于 和 表格 布局 说 再 
见 ， 可 以 先 用 样式 表 代 蔡 font 标签 。 随 着 所 学 知识 的 增多 ， 用 户 能 做 的 就 越 多 。 好 ， 一 起 
来 看 看 我 们 需要 做 哪些 事 。 

1) 用 CSS 定义 元 素 外 观 

我 们 在 写 标识 时 已 经 养 成 习惯 ， 当 希望 字体 大 点 就 用 <hl>， 和 希望 在 前 面 加 个 点 符号 就 
用 <li>。 我 们 总 是 认为 <hl> 的 意思 是 大 的 、<li> 的 意思 是 圆 点 、<b> 的 意思 是 加 粗 文本 。 而 
实际 上 ，<hl> 能 变 成 你 想 要 的 任何 样子 ， 通 过 CSS，<hl> 能 变 成 小 的 字体 ，<p> 文 本 能 够 
变 成 巨大 的 粗 体 ，<li> 能 够 变 成 一 张 图 片 等 。 我 们 不 能 强迫 用 结构 元 素 实现 表现 效果 ， 我 
们 应 该 使 用 CSS 来 确定 那些 元 素 的 外 观 。 例 如 ， 我 们 可 以 使 原来 默认 的 6 级 标题 看 起 来 大 
小 一 样 。 

hl, h2, h3, h4, h5, h6{ font-family: 宋体 , serif font-size: 12px: } 

2) 用 结构 化 元 素 代 蔡 无 意义 的 标签 

许多 人 可 能 从 来 都 不 知道 HTML 和 XHTML 元 素 的 设计 本 意 是 用 来 表达 结构 的 ， 人 们 已 
经 习惯 用 元 素来 控制 表现 , 而 不 是 结构 。 例如， 一段 列表 内 容 可 能 会 使 用 下 面 这 样 的 标识 。 

句子 一 <br/> 句子 二 <br /> 句子 三 <br /> 

如 果 我 们 采用 一 个 无 序列 表 代替 会 更 好 。 

<ul> <li> 句 子 一 </li> <li> 句 子 二 </li> <li> 句 子 三 </li> </ul> 

你 或 许 会 说 : “<li> 显 示 的 是 一 个 圆 点 ， 我 不 想 用 圆 点 ”。 事 实 上 ，CSS 没有 设 定 元 
素 看 起 来 是 什么 样子 ， 用 户 完全 可 以 用 CSS 关 掉 圆 点 。 

3) 给 每 个 表格 和 表单 加 上 id 

给 表格 或 表单 赋予 一 个 唯一 的 、 结 构 的 标记 ， 例 如 : 

<table id="menu"> 

接 下 来 , 在 书写 样式 表 的 时 候 , 用 户 就 可 以 创建 一 个 menu 选择 器 , 并 且 关 联 一 个 CSS 
规则 , 用 来 告诉 表格 单元 、 文 本 标签 和 所 有 其 他 元 素 怎么 去 显示 。 只 需要 一 个 附着 的 标记 ( 标 
记 menu 的 id 标记 )， 用 户 就 可 以 在 一 个 分 离 的 样式 表 内 为 干净 的 、 紧 凑 的 代码 标记 进行 特 
别 的 表现 层 处 理 。 

中 级 改善 我 们 这 里 先 列 主要 的 3 点 ， 但 其 中 包含 的 内 容 和 知识 点 非常 多 ， 需 要 逐步 学 
习 和 掌握 ， 直 到 最 后 实现 完全 采用 CSS 而 不 采用 任何 表格 实现 布局 。 


4.2 认识 DIV 


4.2.1 DIV 是 什么 


DIV 与 其 他 XHTML 标签 一 样 是 一 个 XHTML 所 支持 的 标签 。 当 用 户 采 用 一 个 表格 时 ， 
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与 应 用 <Table></Table> 这 样 的 结构 一 样 ，DIV 在 使 用 的 时 候 也 是 以 <Div></Div> 这 样 的 形式 
出 现 。DIV 是 一 个 容器 ， 我 们 知道 , XHTML 页 面 中 的 每 一 个 标签 对 象 几乎 都 可 以 称 得 上 
是 一 个 容器 ， 如 使 用 HI 标题 对 象 。 

<h1> 厚 溥 教育 <hl> 

hl 作为 一 个 容器 ， 其 中 放置 了 内 容 ， 同 时 DIV 也 是 一 个 容器 ， 能 够 放置 内 容 。 例 如 : 

<div>HTML 网 页 设计 </div> 

DIV 是 XHTML 中 指定 的 ， 专 门 用 于 布局 设计 的 容器 对 象 。 我 们 知道 ， 在 传统 的 表格 
布局 中 之 所 以 能 进行 页 面 的 排版 布局 设计 ， 完 全 依赖 于 表格 对 象 table， 在 页 面 中 绘制 一 个 
或 多 个 单元 格 组 成 的 表格 ， 再 在 相应 的 表格 中 放 入 内 容 。 通 过 表格 单元 格 的 位 置 控 制 ， 达 
到 实现 布局 排版 的 目的 ， 这 是 表格 式 布局 的 核心 内 容 。 而 在 今天 ， 我 们 所 要 接触 的 是 一 种 
全 新 的 布局 方式 一 一 CSS 布局 ， 这 种 布局 的 核心 对 象 则 是 DIV， 我 们 的 页 面 排版 不 需要 依 
赖 表 格 ， 仅 从 DIV 的 使 用 上 说 ， 做 一 个 简单 的 布局 只 需要 依赖 两 样 东西 一 -DIV 和 CSS， 
因此 也 有 人 称 CSS 布局 为 DIV+CSS。 


4.2.2 ”如 何 使 用 DIV 


与 其 他 XHTML 对 象 一 样 ， 我 们 只 需要 应 用 <div></div> 这 样 的 标签 形式 ， 将 内 容 放置 其 
中 ， 便 可 以 应 用 DIV 标签 。 但 是 请 注意 一 点 ，DIV 标签 只 是 一 个 表示 ， 作 用 是 把 内 容 表示 成 
一 个 区 域 ， 并 不 负责 其 他 事情 。DIV 只 是 CSS 布局 工作 的 第 一 步 ， 需 要 通过 DIV 将 页 面 中 的 
内 容 元 素 标记 出 来 ， 如 需要 一 个 导航 条 就 可 以 使 用 DIV 标识 出 一 个 导航 条 的 区 域 ， 而 导航 条 
是 什么 样 ，DIV 不 负责 ， 剩 下 的 事情 由 CSS 来 处 理 。 

DIV 对 象 中 除了 可 以 直接 放 入 文本 ,也 可 以 放 入 其 他 标签 , 还 可 以 是 多 个 DIV 标签 进 
行 嵌 套 使 用 ， 最 终 的 目的 是 合理 地 标识 出 我 们 的 页 面 区域 。 

DIV 对 象 在 使 用 时 , 同 其 他 XHTML 对 象 一 样 , 可 以 加 入 其 他 属性 ,如 ID、CLASS、ALIGN、 
STYLE 等 。 而 在 CSS 布局 方面 ， 为 了 实现 内 容 与 表现 的 分 离 ， 不 应 当 将 ALIGN 对 齐 属 性 与 
STYLE 行 间 样式 属性 编写 在 XHTML 页 面 的 DIV 标签 之 中 ,因此 ，DIV 最 终 代 码 只 可 能 拥有 
以 下 两 种 形式 。 

<div id="id 名 称 '> 厚 溥 教育 </div> 

<div class="class">HTML 网 页 设计 </div> 

使 用 了 D 属性 ， 可 以 为 当前 DIV 指定 一 个 D 名 称 ， 而 在 CSS 中 使 用 人 D 选择 符 进行 样式 
编写 ， 同 样 可 以 使 用 CLASS 属性 ， 在 CSS 中 使 用 CLASS 选择 符 进行 样式 编写 。 


前 / 注 高 ， 
| ”不管 是 应 用 于 DIV 还 是 其 他 对 象 的 ID 中 ， 同 一 个 名 称 的 ID 值 在 当前 XHTML 页 | 
面 中 只 允许 使 用 一 次 ， 而 class 名 称 则 可 以 重复 使 用 。 。 


! 
\ 
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4.2.3 理解 DIV 


在 一 个 没有 任何 CSS 应 用 的 页 面 中 ， 即 使 应 用 了 DIV， 也 没有 实际 效果 ， 就 如 同 直接 
打上 了 DIV 中 的 内 容 一 样 。 那 么 该 如 何 理解 DIV 在 布局 上 所 带 来 的 不 同 呢 ? 

我 们 知道 ， 在 设计 表格 时 ， 使 用 表格 设计 的 左右 分 栏 或 上 下 分 栏 ， 都 能 够 在 浏览 器 预 
览 中 直接 看 到 分 栏 的 效果 。 

表格 自身 的 代码 形式 ， 决 定 了 在 浏览 器 中 显示 的 时 候 ， 两 块 内 容 分 别 显示 在 左 单元 格 
与 右 单元 格 之 中 ， 因 此 ， 不 管 是 否 应 用 了 表格 线 ， 都 可 以 明确 地 知道 内 容 存在 于 两 个 单元 
格 之 中 ， 都 会 达到 分 栏 的 效果 。 而 DIV 布局 的 头 一 个 代码 可 能 会 让 我 们 失望 ， 先 来 尝试 编 
写 两 个 DIV， 用 于 左 分 栏 与 右 分 栏 ， 代 码 如 下 。 

<div> 左 分 栏 </div> 

<div> 右 分 栏 </div> 

而 此 时 在 浏览 器 中 能 够 看 到 的 仅仅 是 出 现 了 两 行文 字 ， 并 没有 显示 DIV 的 任何 特征 ， 
实际 上 这 样 的 效果 带 给 我 们 两 个 信息 。 

首先 ， 我 们 发 现 : “ 左 分 栏 ” 与 “ 右 分 栏 ” 这 两 段 文字 不 是 并 排放 置 , 而 是 上 下 放置 ， 
这 说 明 DIV 对 象 本 身 是 占据 整 行 的 一 种 对 象 ， 不 允许 其 他 对 象 与 它 在 一 行 中 并 列 显 示 ， 用 
W3C 的 官方 话 来 说 就 是 , DIV 是 一 个 block 对 象 一 一 块 状 对 象 (或 者 称 为 块 级 元 素 ), XHTML 
中 的 所 有 对 象 几乎 都 默认 为 两 种 类 型 。 

(1) block 块 状 对 象 

块 状 对 象 指 的 是 当前 对 象 显示 为 一 个 方块 ， 默 认 的 显示 状态 下 ， 将 占据 整 行 ， 其 他 的 
对 象 在 下 一 行 显示 。 

(2) in-line 行 间 对 象 (或 者 称 为 内 联 元 素 ) 

in-line 行 间 对 象 相反 ， 它 允许 下 一 个 对 象 与 它 本 身 在 一 行 中 进行 显示 。 

块 状 的 DIV 也 说 明 DIV 在 页 面 中 并 非 用 于 类 似 于 文本 一 样 的 行 间 排 版 ， 而 是 用 于 大 
面积 、 大 区 域 的 块 状 排 版 。 

其 次 ， 从 页 面 效果 中 可 以 发 现 ， 网 页 之 中 ， 除 了 文字 之 外 ， 没 有 任何 其 他 效果 。 两 个 
DIV 之 间 的 关系 ,只 是 前 后 关系 , 并 没有 出 现 类 似 表格 的 田 字 型 的 组 织 形式 , 因此 可 以 说 ， 
DIV 本 身 与 样式 没有 任何 关系 ， 样 式 需要 编写 CSS 来 实现 ， 因 此 DIV 对 象 应 当 说 从 本 质 
上 实现 了 与 样式 的 分 离 。 

这 样 做 的 好 处 是 ， 由 于 与 样式 分 离 ，DIV 的 最 终 样 式 由 我 们 根据 CSS 的 功能 来 编写 ， 
可 以 设置 为 左右 分 栏 的 样式 ， 也 可 以 设置 为 上 下 分 栏 的 样式 。 而 表格 则 不 行 ， 当 定义 了 表 
格 为 2X4 的 版 式 时 ， 就 不 太 可 能 直接 将 其 转换 为 4X2 或 其 他 单元 格 组 织 形式 。DIV 的 这 
种 与 样式 无 关 的 特性 ,使 得 DIV 在 设计 中 拥有 巨大 的 可 伸缩 性 , 用户 可 以 根据 自己 的 想法 
来 改变 DIV 的 样式 ， 不 再 拘泥 于 单元 格 固定 模式 的 束缚 。 

因此 ， 在 CSS 布局 之 中 所 需要 的 工作 可 以 简单 归 集 为 两 个 步骤 : 首先 使 用 DIV 将 内 
容 标记 出 来 ， 然 后 在 这 个 DIV 中 编写 我 们 所 需要 的 CSS 样式 。 
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4.2.4 ”并 列 与 嵌 套 DIV 结构 


1. 并 列 DIV 


在 使 用 DIV+CSS 设计 的 网 页 中 ， 经 常 需要 设置 多 个 DIV 并 列 ， 往 往 是 使 用 float:left 
或 float:right 来 实现 。 但 问题 出 现 了 ， 当 前 面 并 列 的 多 个 DIV 总 宽度 不 足 100% 时 ， 下 面 的 
DIV 就 很 可 能 向 上 提 ， 和 上 一 行 并 列 的 DIV 排 在 同一 行 ， 这 不 是 我 们 想 要 的 结果 。 使 用 
Clear 属性 正好 可 以 解决 这 一 问题 。 

当 图 片 和 文字 元 素 出 现在 另外 的 元 素 中 时 ， 它 们 (图 片 和 文字 ) 称 为 浮动 元 素 (floating 
element)。 使 用 clear 属性 可 以 让 元 素 边 上 不 出 现 其 他 浮动 元 素 。 


border: 1px solid #B1D1CE; 
background-color: #F3F3F3; 


.FootText{ 
height: 180px; 


</style> 

<div class="LeftText"> 区 块 1</div> 

<div class="LeftText"> 区 块 2</div> 

<div class="Clear"></div> 

<div class="FootText"> 区 块 3</div> 

如 果 没 有 Clear 这 一 层 ，“ 区 块 3” 会 紧 接 “ 区 块 2” 并 列 在 同一 行 。 加 了 Clear 这 一 


层 后 ， 会 把 上 面 的 浮动 DIV 的 影响 清除 ， 使 其 不 至 影响 下 面 DIV 的 布局 。 


2. 骨 套 DIV 

DIV 可 以 多 层 进行 嵌 套 使 用 ， 媒 套 的 目的 是 为 了 实现 更 为 复杂 的 页 面 排版 。 例 如 ， 当 设 
计 一 个 网 页 时 ， 首 先 要 有 整体 布局 ， 需 要 产生 头 部 、 中 部 和 底部 ， 这 也 许 会 产生 一 个 较 复 
杂 的 DIV 结构 。 


<div id="header"> 厚 溥 教育 优化 </div> 
<div id="center"> 


<div id="footer"> 厚 溥 教育 </div> 
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在 代码 中 我 们 为 每 个 DIV 定义 了 ID 和 名 称 以 供 识别 。 可 以 看 到 ID 为 header、center 
和 footer 的 3 个 DIV 对 象 ， 它 们 之 间 属 于 并 列 关系 ， 一 个 接着 一 个 。 它 们 在 网 页 的 布局 结 
构 之 中 ， 属 于 水 平方 向 的 布局 。 

而 在 center 之 中 ， 为 了 内 容 需 要 ， 我 们 有 可 能 在 center 中 使 用 一 个 左右 栏 的 布局 ， 因 
此 ， 在 center 之 中 我 们 拥有 两 个 ID 分 别 为 left 与 right 的 DIV。 这 两 个 DIV 本 身 是 并 列 关 
系 ， 而 它们 都 处 于 center 之 中 ， 因 此 它们 与 center 形成 了 一 种 嵌 套 关系 。 如 果 它 们 两 个 被 
样式 控制 为 左右 显示 的 话 ， 那 么 它们 最 终 的 布局 关系 应 当 为 垂直 方向 的 布局 。 

而 我 们 的 网 页 布局 ， 则 由 这 些 嵌 套 着 的 DIV 来 构成 ,无论 是 多 么 复杂 的 布局 方法 ， 都 
可 以 使 用 DIV 之 间 的 并 列 与 嵌 套 来 实现 。 


应 当 尽 可 能 少 地 使 用 谈 套 ， 以 保证 浏览 器 不 用 过 分 消耗 资源 来 对 说 套 关系 进行 | 
1 


4.2.5 使 用 合适 的 对 象 来 布局 


可 能 会 发 生 这 样 的 情况 ， 在 header 区 域 中 ， 有 必要 显示 网 页 标题 ， 但 因为 header 区 域 
之 中 除了 标题 ， 可 能 还 有 其 他 对 象 出 现 ， 如 导航 菜单 等 。 因 此 从 布局 关系 上 来 看 ， 我 们 需 
要 两 个 对 象 来 分 别 标识 header 之 中 的 这 两 个 元 素 。 当 然 , 这 可 以 使 用 DIV 来 完成 ， 其 代码 
结构 如 下 所 示 。 

<div id="header"> 

<div id="title"> 厚 溥 教育 </div> 

<div id="nav">HTML 网 页 设计 </div> 

<div> 

这 样 编写 代码 可 以 吗 ? 答案 是 可 以 ， 而 且 从 语法 上 来 说 没有 任何 错误 ， 符 合 布局 的 规 
范 。 但 是 ， 从 网 页 结构 与 优化 上 来 看 ， 这 种 做 法 是 不 科学 的 。XHTML 的 所 有 标签 之 中 ， 
不 仅 有 DIV， 还 有 其 他 标签 ， 而 每 个 标签 都 有 自己 的 作用 。 虽 然 我 们 可 以 完全 使 用 DIV 来 
构建 布局 ， 但 组 成 的 页 面 将 是 一 个 全 由 DIV 组 成 的 网 页 ， 最 终 带 给 我 们 的 可 读 性 并 不 高 ， 
全 篇 的 DIV 反而 成 了 复杂 的 没有 任何 含义 的 代码 。 正 确 的 做 法 是 选用 符合 需要 的 其 他 
XHTML 标签 ， 合 理 地 替代 DIV， 改 进 后 的 代码 如 下 。 

<div id="header"> 

<hl> 厚 溥 教育 </h1> 

<ul> HTML 网 页 设计 </ul> 

</div> 

我 们 知道 ，h1-h6 表示 标题 1 号 字 到 标题 6 号 字 ， 因 此 使 用 hl 标签 来 作为 标题 用 的 元 
素 再 合适 不 过 。 而 导航 条 一 般 由 多 个 导航 项 组 成 ，ul 列表 正好 可 以 满足 这 样 的 需求 ， 因 此 
我 们 可 以 使 用 ul 对 象 来 标识 导航 条 ， 再 使 用 1 对 每 个 导航 项 进行 标识 ， 这 样 就 组 成 了 新 
的 代码 结构 。Web 标准 推荐 使 用 尽 可 能 符合 页 面 中 元 素 意 义 的 标签 来 标识 元 素 ， 在 以 往 的 
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表格 布局 之 中 ， 无 论 是 hl 还 是 ul， 这 些 元 素 几乎 都 不 常见 到 ， 主 要 原因 就 是 所 有 的 对 象 
形式 都 被 表格 所 替代 ， 页 面 可 读 性 差 ， 也 没有 任何 伸缩 性 可 言 。 而 在 CSS 布局 之 中 ， 要 求 
我 们 尽 可 能 多 地 去 使 用 XHTML 所 支持 的 各 种 标签 ,最 终 网 页 对 象 都 将 拥有 良好 的 可 读 性 ， 
通过 CSS 的 进一步 定义 ， 其 样式 表现 能 力 丝毫 不 比 表格 差 , 而且 拥有 比 表 格 高 出 许多 的 
样式 控制 方法 。 这 也 是 CSS 布局 的 基本 优势 。 


4.3.1 什么 是 盒 模型 


CSS 定义 所 有 的 元 素 都 可 以 拥有 像 盒 子 一 样 的 外 形 和 平面 空间 ， 即 都 包含 边界 、 边 框 、 补 
白 、 内 容 区 域 和 背景 包括 背景 色 和 背景 图 像 )， 这 就 是 盒 模型 。 盒 模型 如 同 工 厂 模具 一 样 ， 
它 规范 了 网 页 元 素 的 显示 基础 。 盒 模型 关系 到 网 页 设计 中 的 排版 、 布 局 、 定 位 等 操作 ， 任 
何 一 个 元 素 都 必须 遵循 盒 模型 规则 ， 如 div、span、hl-h6、p.strong 等 。 


4.3.2 ”使 模 型 的 细节 


W3C 组 织 建议 把 所 有 网 页 上 的 对 象 都 放 在 一 个 盒 oox) 中 ， 设 计 师 可 以 通过 创建 定义 
来 控制 这 个 盒 的 属性 ， 这 些 对 象 包括 段 落 、 列 表 、 标 题 、 图 片 以 及 层 。 盒 模型 主要 定义 4 
个 区 域 ， 内 容 (content)、 边 框 距 (padding)、 边 界 (border) 和 边 距 (margin)。 

这 里 提供 两 张 盒 模型 的 示意 图 ， 便 于 理解 和 记忆 ， 如 图 4-2 和 图 4-3 所 示 。 


THE BOX MODEL 
background-color 


5 
-=-------- 一 


儿 


Internet Expiorer "width' 


图 4-2 ” 盒 模型 细节 1 图 4-3 盒 模 型 细节 2 


每 个 HTML 元 素 都 可 以 看 作 是 一 个 装 了 东西 的 盒子 ， 盒子 里 面 的 内 容 到 盒子 边框 之 间 
的 距离 即 填充 (paddingj， 盒 子 本 身 有 边框 (bordeD， 而 盒子 边框 外 和 其 他 盒子 之 间 还 有 边界 
(margin) 。 
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4.3.3 宽 、 高 、 内 边 距 、 外 边 距 定义 


对 于 盒子 模型 ， 其 中 的 content( 内 容 ) 又 分 为 两 个 元 素 ， 分 别 是 width( 宽 ) 和 height( 高 )， 
分 别 对 应 content 的 宽度 和 高 度 大 
小 ， 如 图 4-4 所 示 。 一 - margin( 外 边 中 ) 

margin 是 指 从 自身 边框 到 另 一 
个 容器 边框 之 间 的 距离 ， 就 是 容器 
外 距离 。 

padding 是 指 自身 边框 到 自身 
内 部 另 一 个 容器 边框 之 间 的 距离 ， 
就 是 容器 内 距离 。 

border 是 指 边框 ， 对 于 边框 ， 
在 定义 的 时 候 可 以 有 不 同 的 样式 ， 比 如 单 边框 、 虚 线 边框 、 实 线 边框 、 双 边框 、 没 有 边框 
等 多 种 样式 。 


<html> 

<head> 

<meta charset="UTF-8"> 
<title> 边 框 样式 </title> 

<style type="text/css"> 

#none {border:none;} 

#dot{border: 3px dotted #000000;} 
#dotted {border: 3px dashed #000000:} 
#solid {border: 3px solid #000000;} 
#double {border: 3px double #000000:border-width: 3px:} 
#ut{border: 3px groove cadetblue:} 
#shape {border: 3px ridge Ted:} 

#inset {border: 3px inset deepskyblue:} 
#outset {border: 3px outset lightcoral:} 
</style> 

</head> 





Content( 内 容 ) 





图 4-4 盒 模型 


<body> 

<div id="none"> 我 没有 边框 </div><br /> 
<div id="dot"> 点 状 边框 </div><br /> 

<div id="dotted"> 虚 线 边框 </div><br /> 
<div id="solid"> 实 线 边 框 <div><br > 
<div id="double"> 双 线 边框 </div><br /> 
<div id="rut">3D 四 槽 边框 </div><br 入 
<div id="shape">3D 垄 状 边框 <div><br /> 
<div id="inset">3D inset 边框 <div><br /> 
<div id="outset">3D outset 边框 </div> 
</body> 

</html> 


显示 效果 如 图 4-5 所 示 。 
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4-5 边框 样式 定义 


4.3.4 上 下 margin 径 加 问题 


边界 县 加 是 一 个 相当 简单 的 概念 。 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 它 会 造成 许多 
混淆 。 简 单 地 说 ， 当 两 个 垂直 边界 相遇 时 ， 它 们 将 形成 一 个 边界 。 这 个 边界 的 高 度 等 于 两 
个 发 生 又 加 的 边界 的 高 度 中 的 较 大 者 。 

下 面 是 发 生 琶 加 的 几 种 情况 : 

(1) 元 素 的 项 边界 与 前 面 元 素 的 底 边 界 发 生 琶 加 ， 如 图 4-6 所 示 。 

(2) 元 素 的 顶 边界 与 父 元 素 的 项 边界 发 生 县 加 ， 如 图 4-7 所 示 。 


图 4-6 边界 县 加 1 图 4-7 边界 受 加 2 
(3) 元 素 的 顶 边界 与 底 边 界 发 生 全 加， 如 图 4-8 所 示 。 


得 加 之 后 


[mao | 


图 4-8 ”边界 合 加 3 
(4) 空 元 素 中 已 经 营 加 的 边界 与 另 一 个 空 元 素 的 边界 发 和 着 加 ， 如 图 4.9 所 示 。 














单元 四 ”基于 DIV+CSS 的 网 页 布局 与 定位 


(5) 边界 合 加 在 元 素 之 间 维 护 了 一 致 的 距 
离 ， 如 图 4-10 所 示 。 














4.3.5 左右 margin 加 倍 问题 


当 box 为 float 时 ,IE 6 中 box 左 右 的 margin 局 之 同 的 宁可 是 硕 展 尖 之 间 的 与 
部 空间 的 两 从 项 全 间 相 同 


会 加 倍 。 比 如 : 图 4-10 边界 县 加 5 


<!IDOCTYPE html> 
<html> 

<head> 

<meta charset="utf-8" /> 
<title> 左 右 margin 加 倍 </title> 


左边 inner 的 右面 的 margin 明显 大 于 5px。 这 时 ， 定 义 inner 的 display 属性 为 inline， 
可 以 解决 该 问题 。 


4.4 CSS 完善 盒 模 型 


在 CSS3 中 新 增 了 一 些 属 性 ， 更 加 丰富 了 盒 模型 的 呈现 样式 ， 通 常 使 用 的 有 
border-radius、border-shadow、border-image 等 属性 ， 下 面 一 一 介绍 这 些 属性 的 使 用 及 效果 
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4.4.1 显示 方式 定义 


普通 情况 下 的 盒 模型 都 是 正方 形状 的 ， 板 板 正 正 的 ， 在 页 面 中 看 起 来 不 是 很 美观 。 如 
何 使 盒子 四 个 角 变 成 漂亮 的 弧 形 ? 在 CSS2 中 ， 如 果 想 要 实现 这 种 效果 ， 需 要 对 每 个 角 使 
用 不 同 的 图 片 ， 这 样 一 来 就 需要 准备 4 张 图 片 ， 操 作 起 来 就 比较 麻烦 ， 但 在 CSS3 中 ， 仅 
仅 通过 border-radius 属性 就 能 够 实现 这 种 效果 。 

HTML 代码 如 下 : 

<html> 

<head> 

<meta charset="UTF-8"> 

<title> 盒 模型 圆 角 显 示 </title> 


<div> 使 用 border-radius 属性 向 元 素 中 添加 圆 角 </div> 
</body> 
</html> 


显示 效果 如 图 4-11 所 示 。 








J CD Aa 


这 样 的 边框 也 不 是 很 漂亮 ， 如 果 能 添加 一 些 图 © [© 1270018020/irstHTMUh.- 众 | : 
片 ， 盒 模型 可 能 会 美观 许多 ， 在 CSS3 中 ， 大 家 可 less Reba He SE 


以 通过 border-image 属性 来 设置 这 种 含有 图 片 的 边 (Corer etiam) 
框 。 


HTML 代码 如 下 : 


图 4-11 圆 角 显示 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 盒 模型 图 片 边框 显示 </title> 
<style type="text/css"> 
div{ 
‘border: 25px solid transparent: 
width: 300px: 


border-image: url(../img/xiaotubiao.png) 30 30 round: 
} 
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#picture{ 
border-image: url(../img/xiaotubiao.png) 30 30 stretch; 


</style> 


<div id="round"> 平 铺 图 片 显 示 边框 </div> 
<br> 
<div id="picture"> 拉 伸 图 片 显示 边框 </div> 
</body> 
</html> 


显示 效果 如 图 4-12 所 示 。 
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4.4.2 溢出 处 理 谎 四 ET apm , 
我 们 的 设计 页 面 时 ， 有 时 不 得 不 考虑 到 一 个 问题 ， 屠 


就 是 当 盒子 的 内 容 超出 盒子 的 边界 时 ， 该 怎么 处 理 ? 在 上 过 和 

CSS2 中 ,有 一 个 overflow 属性 可 以 处 理 溢出 问题 ,在 CSS3 

中 ， 新 增 了 overflow-x 和 overflow-y 属性 ， 这 两 个 属性 是 国生 2 国生 这 站 用 二 

对 overflow 属性 的 补充 ， 表 示 水 平方 向 上 的 溢出 处 理 和 垂直 方向 上 的 溢出 处 理 ， 溢 出 值 如 
表 4-1 所 示 。 


语法 格式 : overflow-x: 溢 出 处 理 值 ，overflow-y: 溢 出 处 理 值 ; 


表 4-1 溢出 值 表 

溢出 处 理 值 说 明 
visible 默认 值 ， 盒 子 溢出 时 ， 不 裁剪 浇 出 的 内 容 ， 超 出 盒子 边界 的 部 分 显示 在 盒 元 素 外 
auto 盒子 溢出 时 ， 显 示 滚 动 条 
hidden 盒子 溢出 时 ， 滋 出 的 内 容 被 裁 前 ， 并 且 不 提供 滚动 条 
scroll 始终 显示 滚动 条 
no-displa 当 盒子 溢出 时 ， 不 显示 元 素 ， 此 属性 为 新 增 属性 
no-content 当 盒子 溢出 时 ， 不 显示 内 容 ， 此 属性 为 新 增 属性 


HIML 代码 如 下 。 
<html><head> 

<meta charset="UTF-8"> 
<title> 洲 出 处 理 方式 </title> 
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#overflowl{ 
overflow-x: visible': 
overflow-y: visible: 


#overflow2{ 
overflow-x: auto; 
overflow-y: auto; 
} 
#overflow3{ 
‘overflow-x: hidden; 
overflow-y: hidden:; 
. 
#overflow4{ 
overflow-x: scroll; 
overflow-y: scroll: 
} 
</style> 
</head> 
<body> 
<div id="overflow1"> 盒 状 模型 是 CSS 中 重要 的 概念 。 虽 然 CSS 中 没有 盒 状 模型 这 个 属性 ， 
但 它 却 是 CSS 中 无 处 不 在 的 ， 盒 装 模 型 是 由 margin、border、padding 和 content 几 个 属 
性 组 合 形成 的 。</div> 
<div id="overflow2"> 盒 状 模型 是 CSS 中 重要 的 概念 。 虽 然 CSS 中 没有 盒 状 模型 这 个 属性 ， 
但 它 却 是 CSS 中 无 处 不 在 的 ， 盒 装 模 型 是 由 margin、border、padding 和 content 几 个 属 
性 组 合 形成 的 。</div> 
<div id="overflow3"> 盒 状 模型 是 CSS 中 重要 的 概念 。 虽 然 CSS 中 没有 盒 状 模型 这 个 属性 ， 
但 它 却 是 CSS 中 无 处 不 在 的 ， 盒 装 模 型 是 由 margin、border、padding 和 content 几 个 属 
性 组 合 形成 的 。</div> 
<div id="overflow4"> 盒 状 模型 是 CSS 中 重要 的 概念 。 虽 然 CSS 中 没有 僵 状 模型 这 个 属性 ， 
但 它 却 是 CSS 中 无 处 不 在 的 ， 盒 装 模 型 是 由 margin、border、padding 和 content 几 个 属 
性 组 合 形成 的 。</div> 
</body> 
</html> 
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显示 效果 如 图 4-13 所 示 。 
内 SR DD Raw 分 ER- 下 党 六 由 oa ee 


4.4.3 ”轮廓 样式 定义 
便 斌 模 轨 办 C55 中午 要 的 概 重 术 模 光 加 CSS 丰 重要 的 和 
传闻 办 CS$ 中 没有 辣 杖 机 县 含 。 虽 准 C55 中 议 有 全 虽 
轮廓 (outline) 是 绘制 于 元 素 周 围 的 一 条 线 , 位 rg oa 
于 边框 边缘 的 外 围 ， 主 要 作用 是 为 了 突出 元 素 ， A 着 9 
我 们 可 以 通过 轮廓 属性 来 定义 元 素 轮廓 的 样式 、 - 
颜色 、 宽 度 。 轮 廓 的 基本 结构 如 图 4-14 所 示 。 图 4-13 盒 模型 溢出 处 理 方式 
HTML 代码 如 下 。 


<html> 
<head> 
<meta charset="UTF-8"> 


<title> 盒 模型 轮廓 </title> 
<style type="text/css"> 4-14 轮廓 结构 
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<div> 轮 廓 样式 、 颜 色 、 宽 度 定义 。</div> 


</body> 
</html> 


显示 效果 如 图 4-15 所 示 。 二 nm 妇 | 国 
在 本 例 中 , outline-style 属性 是 用 来 定义 eeeeeeeeeee 
轮廓 样式 的 ， 其 样式 值 和 前 文 所 讲 的 边框 样 站 样 式 、 颜 名、 实证 义 ， 
式 值 一 样 ，outline-color 是 定义 轮廓 颜色 的 ， O00000000060 
outline-width 是 用 来 定义 轮廓 宽度 的 。 图 4.15 盒 模 型 轮廓 定 义 

















4.5 ”浮动 与 定位 


浮动 (float) 属 性 用 于 定义 元 素 在 哪个 方向 浮动 ， 以 往 这 个 属性 总 是 应 用 于 图 像 ， 使 文 
本 围绕 在 图 像 周围 。 不 过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 
而 不 论 它 本 身 是 何 种 元 素 。 


4.5.1 文档 流 


文档 流 (Document Flow) 将 窗 体 自 上 而 下 分 成 一 行 行 ， 并 在 每 行 中 按 从 左 至 右 的 顺序 排 
放 元 素 。 

文档 流 分 为 两 种 ， 分 别 是 : 

。 普通 文档 流 

我 们 打开 网 页 时 ， 都 是 上 方 的 部 分 首先 显示 出 来 ， 然 后 是 中 间 部 分 ， 最 后 才 是 底部 ， 
直到 显示 完成 。 这 样 的 顺序 体现 在 HTML 代码 中 就 是 先 写 的 标签 先 显 示 ， 后 写 的 标签 后 显 
示 。 整 个 过 程 好 像 瀑布 从 上 到 下 ， 因 此 命名 为 普通 文档 流 。 

。 特殊 文档 流 

特殊 文档 流 指 在 页 面 载 入 浏览 器 的 时 候 ， 那 些 不 按照 前 面 所 讲述 的 顺序 ， 脱 离 普 通 文 
档 流 而 单独 显示 的 标签 。 还 是 利用 瀑布 来 举例 : 瀑布 倾泻 而 下 的 时 候 ， 部 分 水 流 碰 到 了 岩 
石 ， 导 致 下 落 方向 与 瀑布 主题 不 同 ， 它 们 就 可 以 叫 作 特殊 文档 流 。 

每 个 非 浮动 块 级 元 素 都 独占 一 行 , 浮动 元 素 则 按 规定 浮 在 行 的 一 端 , 若 当 前 行 容 不 下 ， 








使 用 HTML 设 计 商 业 网 站 





则 另 起 新 行 再 浮动 。 

内 联 元 素 也 不 会 独占 一 行 ， 几 乎 所 有 元 素 ( 包 括 块 级 、 内 联 和 列表 元 素 ) 均 可 生成 子 行 ， 
用 于 摆 放 子 元 素 。 

有 3 种 情况 将 使 得 元 素 脱离 文档 流 而 存在 ， 分 别 是 浮动 、 绝 对 定位 、 固 定 定位 。 但 是 
在 下 中， 浮动 元 素 也 存在 于 文档 流 中 。 

浮动 元 素 不 占 任何 正常 文档 流 空 间 ， 浮 动 元 素 的 定位 还 是 基于 正常 的 文档 流 ， 然 后 从 
文档 流 中 抽出 并 尽 可 能 远 地 移动 至 左 侧 或 者 右 侧 ， 文 字 内 容 会 围绕 在 浮动 元 素 周围 。 当 一 
个 元 素 从 正常 文档 流 中 抽出 后 ， 仍 然 在 文档 流 中 的 其 他 元 素 将 忽略 该 元 素 并 填补 它 原先 的 
空间 。 

浮动 概念 让 人 迷惑 的 根源 在 于 浏览 器 对 理论 的 解读 。 只 能 说 ， 很 多 人 以 正 做 标准 ， 其 实 
它 不 是 。 

基于 文档 流 ， 我 们 可 以 很 容易 地 理解 以 下 的 定位 模式 。 

(1) 相对 定位 : 即 相对 于 元 素 在 文档 流 中 的 位 置 进行 偏 移 ， 但 保留 原 占 位 。 

(2) 绝对 定位 : 即 完全 脱离 文档 流 ， 相 对 于 position 属性 非 static 值 的 最 近 父 级 元 素 进 
行 偏 移 。 

(3) 固定 定位 ， 即 完全 脱离 文档 流 ， 相 对 于 视 区 进行 偏 移 。 


4.5.2 浮动 定位 
浮动 的 框 可 以 向 左 或 向 右 移动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 另 一 个 浮动 框 的 边框 为 


止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ， 所 以 文档 普通 流 中 的 块 框 表现 得 就 像 浮动 框 不 存在 
一 样 


当 把 框 1 向 右 浮动 时 ， 它 脱离 文档 流 并 且 向 右 移动 ， 直 到 它 的 右边 缘 碰 到 包含 框 的 右 
边缘 ， 如 图 4-16 所 示 。 

当 框 1 向 左 浮动 时 , 它 脱离 文档 流 并 且 向 左 移 动 , 直到 它 的 左边 缘 碰 到 包含 框 的 左边 缘 。 
因为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ,实际 上 覆盖 住 了 框 2, 使 框 2 从 视图 中 消失 。 
如 果 把 3 个 框 都 向 左 移动 ， 那么 框 1 向 左 浮动 直到 碰 到 包含 框 ， 另 外 两 个 框 向 左 浮动 直到 碰 
到 前 一 个 浮动 框 ， 如 图 4-17 所 示 。 


i 


图 4-16 固定 和 浮动 的 框 图 4-17 浮动 框 的 覆盖 


如 图 4-18 所 示 ， 如 果 包 含 框 太 窄 ,无 法 容纳 水 平 排列 的 3 个 浮动 元 素 ， 那么 其 他 浮动 
块 将 向 下 移动 ， 直 到 有 足够 的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 ， 那 么 当 它 们 向 下 移动 时 可 
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能 被 其 他 浮动 元 素 “ 卡 住 ”。 
我 们 举 个 简单 的 例子 ，HTML 代码 如 下 : 


图 4-18 浮动 框 的 卡 位 


<body> 

<p> 在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 <b>floatright</b> 的 图 像 。 结 果 是 这 个 图 像 会 浮动 到 
段落 的 右 侧 。</p> 

<p> 

<img src="img/eg_cute.gif"' /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
<p> 

</body> 

</html> 


显示 效果 如 图 4-19 所 示 。 ta 


口 az7oalaozoyfraHr x 
© |@ 1270018020/firstHTMLUhtmK/ 男 片 却 动 himi?_hbt=1524710854740 | : 


~ a Rs 目 oa 
4 5 :3 浮动 的 清理 六 ,我们 添加 了 一 个 样式 为 ioaftrtghtf9 加 你 。 结 曲 呈 这 个 国父 全 浮动 到 段 菏 由 


Thisissome text This is some text This is some text This is some text This is 
some text This is some text This is some text This is some text This is some 


浮动 的 清理 (clear) 属 性 规定 元 素 text. This is some text This is some text. This is some text This is some text This 


is some text This is some text. This is some text This is some text This is some text. 
的 哪 一 侧 不 允许 其 他 浮动 元 素 出 现 。 | 避 多 Pe Dm 
some text This is some text This is some text. 
表 4-2 列 出 了 clear 属性 值 。 
图 4-19 图 片 的 浮动 定位 


表 4-2 clear 属性 值 

















在 左 侧 不 允许 出 现 浮动 元 素 

在 右 侧 不 允许 出 现 浮动 元 素 

在 左右 两 侧 均 不 允许 出 现 浮动 元 素 
默认 值 。 人 允许 浮动 元 素 出 现在 两 侧 
规定 应 该 从 父 元 素 继承 clear 属性 的 值 
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例如 ， 图 像 的 左 侧 和 右 侧 均 不 允许 出 现 浮动 元 素 : 


<img src="img/eg_cute.gif"' /> 
<img src="img/eg_cute.gif"' /> 
</body> 
</html> 


4.5.4” 何 时 选用 浮动 定位 


DIV 浮动 定位 的 本 意 是 要 将 插入 到 文章 中 的 图 片 向 左 或 者 向 右 浮动 ， 使 图 片 下 方 的 文 
字 自 动 环 绕 在 它 的 周围 ， 且 图 片 的 左边 或 者 右边 不 会 出 现 大 块 的 留 白 。DIV 浮动 定位 的 语 
法 虽然 简单 ， 但 却 不 那么 容易 掌握 ， 下 面 让 我 们 举例 说 
明 如 何 用 浮动 来 进行 布局 。 同 样 ， 我 们 要 实现 一 个 带 页 














脚 的 三 栏 布局 ， 如 图 4-20 所 示 。 
如 何 用 DIV 浮动 定位 实现 这 样 的 效果 呢 ? 
其 实 很 简单 : 
(1) 设 定 EE 的 宽度 ， 让 EE 居中 。 
(2) 设 定 A、B、C 的 宽度 ， 将 A、B、C 分 别 向 左 J 

浮动 。 TE 
(3) 给 页 眉 、 页 脚 设置 clear 属性 。 
我 们 来 看 下 面 的 例子 ，HTML 代码 如 下 : 



































图 4-20 DIV 浮动 页 面 布局 图 
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<div class="header"> 

<hl class="header">W3School.com.cn</h1> 

</div> 

<div class="left"> 

<p>"Never increase, beyond what is necessary, the number of entities required to explain anything." 

William of Ockham (1285-1349)</p> 

</div> 

<div class="content"> 

<h2>Free Web Building Tutorials</h2> 

<p>At W3School.com.cn you will find all the Web-building tutorials you need. 

from basic HTML and XHTML to advanced ITIETIETET 
XML XSL Multimedia and WAP.</p> [CR 


<p>W3School.com.cn - The Largest Web en RR OAR 


Developers Site On The Net!</p> W3Sschool.com.cn | 


<div class="footer">Copyright 2008 by YingKe ne Free Web Building Tutorials 


Investment.</di 有 AL W3Schoolcom.cn you will nd all the Web: 
<Jdiv> ti building tutorials you need, from basic HTML 


</div> and XHTML to advanced XML XSL Multimedia 
了 and WAP, 


</div> 


y Waschoolcom.cn - The Largest Web Developers 
</html> Site On The Net! 


显示 效果 如 图 4-21 所 示 。 Gopiohi 2000 by Wink esatani 
图 4-21 利用 浮动 定位 布局 





【单元 小 结 】 


网 站 可 以 分 为 内 容 、 表 现 、 结 构 三 部 分 。 

DIV 是 XHTML 中 指定 的 ， 专 门 用 于 布局 设计 的 容器 对 象 。 

盒 模型 主要 属性 : 内 容 (content)、 边 框 距 (padding)、 边 界 (border) 和 边 距 (margin)。 
通过 使 用 浮动 定位 来 对 网 页 进行 排版 。 
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【单元 自 测 】 


1. DIV+CSS 的 优势 有 哪些 ?(  ) 
A. 表现 和 内 容 相 分 离 B. 提高 搜索 引擎 对 网 页 的 索引 效率 
C. 代码 简洁 ， 提 高 页 面 浏览 速度 D. 易于 维护 和 改版 
2. 如 果 要 使 多 个 DIV 并 列 排列 ， 应 使 用 (。” )。 
A. margin B. content 
C. float D. clear 
3. 下 面 哪个 属性 是 指 盒 模型 的 边 距 ? ( ) 
A. content B. padding 
C. border D. margin 
4. 在 网 页 中 ,为 了 将 Hl 标题 定位 于 左边 距 为 100px、 上 边 距 为 50px 处 , 效果 如 图 4-22 
所 示 ， 下 面 代码 正确 的 是 (  )。 
A. 
hf{ 


€ 3 © |©12700.1:8020/firstHTML/html4/... 会 | : 
洪 应 用 党 百度 同 OA 系统 





将 HI 标题 定位 
图 4-22 ”HI 标题 定位 
5. 下 列 情况 中 ， 哪 些 会 发 生 margin 属性 的 倒 加 ? ( 
. 元 素 的 顶 边界 与 前 面 元 素 的 底 边 界 发 生 全 加 
. 元 素 的 顶 边界 与 父 元 素 的 项 边界 发 生 欠 加 
. 元 素 的 顶 边界 与 底 边界 发 生 受 加 
. 空 元 素 中 已 经 合 加 的 边界 与 另 一 个 空 元 素 的 边界 发 生 用 加 


【上 机 实战 】 


上 机 目标 


e 掌握 用 CSS+DIV 进行 网 页 布局 
e 学 会 使 用 盒 模型 对 页 面 元 素 进行 定位 
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上 机 练习 


练习 1: 用 DIV 布局 


【问题 描述 】 

用 DIV 对 如 图 4-23 所 示 的 网 页 框架 进行 布局 ， 包 括 Banner 图 片 、 导 航 条 、 左 侧 的 导 
购 信息 以 及 主体 部 分 的 产品 展示 等 。 

【问题 分 析 】 

图 4-23 中 的 各 个 部 分 直接 采用 了 HTML 代 
码 中 各 个 <div> 块 对 应 的 id。 其 中 ，#banner 块 对 
应 页 面 上 部 的 banner 图 片 ，#global link 则 是 网 站 
的 导航 菜单 栏 , #left 与 #main 是 页 面 的 主体 块 ， 相 
应 的 代码 框架 如 下 : 图 4-23 DIV 布局 

<div id="container"> 

<div id="banner"><img src="banner.jpg"></div> 

<div id="global link"></div> 

<div id="main"></div> 

</div> 

练习 2: 浮动 定位 显示 

【问题 描述 】 

在 练习 1 的 基础 上 把 主 模块 和 左 侧 模块 加 以 细 

如 图 4-24 所 示 。 

【问题 分 析 】 ee 

机 eft 包含 登录 系统 以 及 产品 的 分 类 信息 ,#main 
块 则 主要 包括 本 站 快讯 、 产 品 推荐 、 新 品 上 市 和 产 
品 导 购 等 。 图 4-24 浮动 定位 显示 

参考 代码 : 

<div id="left"> 






































#left 












































Hnew 
#category ps 
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令 第 二 阶段 多 


练习 3: 利用 CSS 的 属性 实现 练习 1 和 练习 2 的 图 示 效 果 


【问题 描述 】 
通过 本 章 学 习 的 知识 点 ， 实 现 前 面 的 练习 ， 效 果 如 图 4-25 所 示 。 
-Tens 


J Fine Jewelry, Value and Expert Advice, 











图 4-25 CSS 属性 实现 效果 图 


【拓展 作业 】 


模仿 新 浪 、 搜 狐 等 门户 网 站 ， 用 DIV 进行 布局 ， 如 图 4-26 所 示 。 











图 4-26 CSDN 网 站 
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© 课程 目标 


区 掌握 如 何 进行 CSS 布局 
PP 掌握 如 何 使 用 HIML 列表 
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亿 户 首 丰 

本 单元 讨论 CSS 的 布局 和 HTML 的 一 个 基本 标签 。HTML 标签 是 网 页 的 基本 组 成 ， 要 
实现 一 个 网 页 ， 标 签 是 必 不 可 少 的， 而 本 章 将 学 习 基本 标签 的 用 法 ， 如 标题 标签 和 段落 级 
标签 ， 还 将 讨论 文本 格式 化 标签 、 列 表 及 如 何在 HTML 中 插入 图 像 。 

列表 是 网 页 制作 过 程 中 使 用 率 很 高 的 组 件 ， 本 章 详细 讲解 了 列表 的 用 法 。 


5.1 应 用 CSS 布局 网 页 


CSS 的 布局 是 一 种 很 新 的 布局 理念 ， 完 全 有 别 于 传统 的 布局 习惯 。 它 首先 将 页 面 在 整 
体 上 进行 <div> 标 记 的 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 再 在 各 个 块 中 添加 相应 的 
内 容 。 通 过 CSS 布局 的 页 面 ， 更 新 十 分 容易 ， 甚 至 是 页 面 的 拓扑 结构 ， 都 可 以 通过 修改 
CSS 属性 来 重新 定位 。 本 节 主 要 介绍 CSS 布局 的 一 些 基本 技巧 。 


5.1.1 一 列 固定 宽度 及 高 度 
一 列 固定 宽度 是 CSS 布局 基础 中 的 基础 ， 由 于 布局 有 时 需要 去 固定 盒子 的 宽度 和 高 


度 ， 因 此 我 们 直接 设置 了 宽度 属性 width: 300px， 与 高 度 属性 height: 200px， 其 HTML 代 
码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<title> 一 列 固定 宽度 </title> 

<style type="text/css"> 

圾 ayout { 
border: 2px solid #A9C9E2; 
background-color: #E8FS5FE:; 
height: 200px; 





<div id="layout"> 固 定 宽度 为 300px, 固 定 高 度 为 200px</div> 300PX 夯 定 高 让 为 200px 
</body> 
</html> 


其 效果 图 如 图 5-1 所 示 。 


Sl = 适应 
列 自 适应 宽度 图 5-1 一 列 固定 宽度 及 高 度 
自 适 应 布局 是 网 页 设计 中 常见 的 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 的 大 
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小 ， 自 动 改变 其 宽度 值 和 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 。 良 好 的 自 适应 布局 网 站 对 
不 同 分 辨 率 的 显示 器 都 能 提供 最 好 的 显示 效果 。 实 际 上 DIV 默认 状态 下 占据 整 行 的 空间 ， 
便 是 宽度 为 100% 的 自 适 应 布局 的 表现 形式 。 一 列 自 适 应 布局 需要 我 们 做 的 工作 也 非常 简单 ， 
只 需要 将 宽度 由 固定 值 改 为 百分比 值 的 形式 即 可 。 
CSS 大 部 分 用 数值 作为 参数 的 样式 属性 都 提供 了 百分比 ，width 宽度 属性 也 不 例外 ， 在 
这 里 我 们 将 宽度 由 一 列 固 定 宽度 的 300px 改 为 80%， 从 下 边 的 预览 效果 中 可 以 看 到 ，DIV 
的 宽度 值 已 经 变 为 浏览 器 宽度 的 80%。 自 适应 的 优势 就 是 当 扩 大 或 缩小 浏览 器 窗口 大 小 时 ， 
还 将 维持 与 浏览 器 当前 宽度 的 比例 。 
<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title> 一 列 自 适 应 宽度 </title> 
<style type="text/css"> 
#ayout { 
border: 2px solid #A9C9E2;: 
background-color: #E8F5FE: 
height: 200px: 
width: 80%; 


</style> 
<div id="layout"> 一 列 自 适应 宽度 </div> 
</body> 
</html> 


我 们 可 以 看 到 , 无 论 浏览 器 窗口 扩大 或 缩小 多 少 , 宽度 都 是 当前 窗口 的 80%, 如 图 5-2 
所 示 。 


癌 一 列 各 适 记 窜 度 x 





— | 一 ——] 
co IO 127.0.0.1:8020/fintHTML.,。 会 C | @ 1270.0.1.8020/firstHTML/html5/ 一 列 自 适应 宽度 html?..， 疤 | 
下 ; 洪 冰 用 站 上 网 S 驴 党 王朗- 下 从 百度 司 OA 系统 辐 javey 习 
| 一列 自 适应 宽度 一 列 自 适应 宽度 





























图 5-2 CSS 的 自 适 应 宽度 显示 效果 


5.1.3 ”一列 固定 宽度 居中 


页 面 整体 居中 是 网 页 设计 中 普遍 应 用 的 形式 ， 在 传统 表格 布局 中 ， 我 们 使 用 表格 的 
align="center" 属 性 来 实现 。DIV 本 身 也 支持 align="center" 属 性 ， 也 可 以 使 iv 呈现 居中 状态 ， 
但 CSS 布 局 是 为 了 实现 表现 和 内 容 的 分 离 ， 而 align 对 齐 属 性 是 一 种 样式 代码 ， 书 写 在 
XHTML 的 DIV 属性 之 中 ， 有 违 分 离 原 则 (分 离 可 以 使 你 的 网 站 更 加 利于 管理 )， 因 此 应 当 用 
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CSS 实 现 内 容 的 居中 。 我 们 以 一 列 固 定 宽度 布局 代码 为 例 ， 为 其 增加 居中 的 CSS 样 式 。 


<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title> 一 列 固 定 宽度 居中 </title> 
<style type="text/css"> 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8FSFE: 
height: 200px; 
width: 300px; 
margin:0px auto; 


</style> 


<div id="layout"> 一 列 固定 宽度 居中 </div> 
</body> 
</html> 


margin 属性 用 于 控制 对 象 的 上 、 下 、 左 、 右 4 个 方向 的 外 边 距 ， 当 margin 使 用 两 个 参 
数 时 ,第 1 个 参数 表示 上 下 边 距 , 第 2 个 参数 表示 左右 边 距 。 除 了 直接 使 用 数值 之 外 , margin 
还 支持 auto 值 ，auto 值 可 以 使 浏览 器 自动 判断 边 距 。 在 这 里 , 我 们 将 当前 DIV 的 左右 边 距 


设置 为 auto， 浏 览 器 就 会 将 DIV 的 左右 边 距 设 为 相等 ， 并 呈现 为 居中 状态 ， 从 而 实现 了 居 


中 效果 。 

其 操作 步骤 和 一 列 固定 宽度 相同 ， 只 需 在 CSS 边框 设置 项 中 将 边界 的 上 、 右 、 下 、 左 
分 别 设置 为 0、auto、0、auto 即 可 ， 其 效果 如 图 
5-3 所 示 。 J 
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5.1.4 设置 列 数 





在 CSS 3 中 又 增加 了 一 些 新 的 属性 来 对 文本 
进行 布局 。 当 大 家 看 报纸 时 会 发 现 一 栏 内 容 中 会 
出 现 多 列 的 现象 ， 我 们 可 以 通过 在 css 表 中 设置 
column-count 属 性 来 规定 元 素 被 分 割 的 列 数 。 下 图 5-3 ”CSS 固定 宽度 居中 
面 我 们 让 元 素 按 照 3 列 显示 , 其 HTML 代 码 显示 如 . > : 
下 ， 运 行 效果 如 图 5-4 所 示 。 CC |@ 1270018020/irstHTMUhtml5/ 下 二 ht、 位 


注 启用 耳 上 只 和 9 篇 党 百度 一 下 党 百度 四 OA 系统 四 javs 学 习 

<IDOCTYPE html> IE9 以 及 更 时 的 版 本 不 支持 多 列 必 性 
=html> 5 启 代 : 杜 者 三 称 身 。 就 中 二房 神 , 宾 从 录音 要 
<head> sl 亲 , 赐 名 大 国 禾 与 
<meta charset="UTF-8"> 

<title> 多 列 显示 文本 </title> 
<style type="text/css"> 

#morecolumn {column-count: 3;} 




















5-4 元素 多 列 显示 
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</style> 
</head> 


<body> 
<p><b>IE9 以 及 更 早 的 版 本 不 支持 多 列 属性 </b></p> 

<div id="morecolumn"> 
丽人 行 唐 代 : 杜甫 
三 月 三 日 天 气 新 ， 长 安 水 边 多 丽人 。 态 浓 意 远 淑 且 真 ， 肌 理 细 腻 骨 肉 匀 。 
绣 罗 衣 党 照 草 春 ， 壁 金 孔 雀 银 麒麟 。 头 上 何 所 有 ? 浴 微 毒 叶 垂 公 展 。 
背后 何 所 见 ? 珠 压 腰 祖 稳 称 身 。 就 中 云 幕 椒 房 亲 ， 赐 名 大 国 号 与 秦 。 
紫 驼 之 峰 出 翠 釜 ， 水 精 之 盘 行 素 鳞 。 犀 答 厌 饶 久 未 下 ， 弯 刀 缕 切 空 纷 纶 。 
黄 门 飞 蒜 不 动 尘 ， 御 厨 络绎 送 八 珍 。 第 鼓 衣 吟 感 鬼 神 ， 宾 从 杂 隶 实 要 津 。 
后 来 鞍马 何 摊 巡 ， 当 轩 下 马 入 锦 菌 。 杨 花 雪 落 覆 白 苹 ， 青 鸟 飞 去 衔 红 巾 。 
炙手可热 势 绝 伦 ， 慎 莫 近 前 丕 相 喷 ! 


5.1.5 ”设置 列 间距 


在 CSS3 中 不 但 有 对 文本 元 素 多 列 的 设置 ， 
实现 这 种 设置 , 我 们 通过 column-gap 属性 来 规 > 
定 列 之 间 的 间隔 ,在 5.1.4 节 的 设置 列 数 的 CSS [GHzraoTaozymshimmmys9SRSEhin 垃 | 
文件 中 只 需要 添加 如 下 代码 即 可 ， 运 行 效果 如 | 守信 时 oR je 


IE9 以 及 更 早 的 版 本 不 支持 多 列 属性 

5-5 所 示 。 Rl? em 
#morecolumn {column-gap: 50px:} . 
从 图 中 ， 我 们 可 以 看 到 ， 每 列 之 间 的 间距 

变 大 。 


5.1.6 设置 列 边 框 样式 


为 了 让 每 列 之 间 的 显示 更 加 美观 , 在 CSS3 
中 新 增 了 column-rule 属性 来 设置 列 之 间 的 宽 
度 、 样 式 和 颜色 ， 通 过 这 些 设置 ， 可 以 让 列 和 
列 之 间 更 加 唯美 。 在 5.1.5 节 的 设置 多 列 间距 
的 CSS 文件 中 ， 我 们 只 需要 添加 如 下 代码 即 
可 ， 运 行 效果 如 图 5-6 所 示 。 

#morecolumn {column-rule:3px dotted red:} 














图 5-6 多 列 之 间 的 宽度 、 样 式 、 颜 色 设 置 
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在 column-rule 中 ，3 个 值 依次 是 设置 列 之 间 规 则 的 宽度 、 样 式 和 颜色 ， 大 家 也 可 以 把 这 
3 个 值 通过 属性 单独 设置 , 即 通过 column-rule- width 来 设置 列 之 间 规 则 的 宽度 、 通过 column- 
rule-style 来 设置 列 之 间 规 则 的 样式 、 通 过 column-rule-color 来 设置 列 之 间 规 则 的 颜色 。 


5.2 HTML 列表 的 应 用 


5.2.1 ul 无 序列 表 和 ol 有 序列 表 


无 序列 表 是 Web 标准 布局 中 最 常用 的 样式 ， 其 代码 如 下 ， 运 行 效果 如 图 5-7 所 示 。 

<div id="layout"> 

<ul> 

<li><atitle=" 第 五 天 超 链接 伪 类 " hre 伍 "/div_css/906.shtml" target=" blank"> 第 五 天 超 链接 伪 类 

</a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " hre 伍 "/div_css/905.shtml" target="” blank"> 第 四 天 纵向 导航 菜单 

</a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 " hre 全 vdiv_css/904.shtml" target=" blank"> 第 三 天 二 列 和 三 列 

布局 </a></li> 

<li><a title=" 第 二 天 一 列 布局 " hre 全 div_css/903.shtml" target="_blank"> 第 二 天 一 列 布局 </a></li> 

<li><a title=" 第 一 天 XHTML CSS 基础 知识 " 

hre 全 div_css/902.shtml" target="_blank"> 第 一 天 

XHTML CSS 基础 知识 </a></li> 

</ul> 

<div> 

无 序列 表 是 没有 特定 顺序 的 列表 项 集合 ， 用 ul 
表示 ， 默 认 每 行 前 的 符号 是 圆 点 ， 可 以 通过 样式 表 改 
为 无 、 方 块 和 空心 圆 等 。 

有 序列 表 是 有 特定 顺序 的 列表 项 集合 , 以 ol 表示 ， 图 5-7 岂 无 序列 表 运 行 效果 
默认 以 数字 为 项 目 符号 , 有 序列 表 也 可 以 用 css 定义 显 
示 为 其 他 格式 ， 代 码 及 显示 效果 如 下 ， 运 行 效果 如 图 
5-8 所 示 。 











© [© 127.001:8020/firstHTMU/him.. 安 | : 
洪 ER 口 上 网 SW 省 百度 -下 省 二 度 








[ 受 】 


<li><atitle=" 第 五 天 超 链接 伪 类 " href"div_css/ 

906.shtml" target="” blank"> 第 五 天 超 链接 伪 类 

</a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " hre 伍 "/div_css/ 5-8 ol 有 序列 表 运行 效果 
905.shtml" target=" blank"> 第 四 天 纵向 导航 菜单 

</a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 " hre 全 div_ css/904.shtml" target="”blank"> 第 三 天 二 列 和 三 列 
布局 </a></li> 

<li><a tile=" 第 二 天 一 列 布局 " href="/div_css/903.shtml" target=" blank"> 第 二 天 一 列 布局 </a></li> 
<li><atitle=" 第 一 天 XHTML CSS 基础 知识 " hreE-Vdiv_ css/902.shtml" target="” blank"> 第 一 天 
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XHTML CSS 基础 知识 </a></li> 
</ol> 
<div> 


5.2.2 ”改变 项 目 符号 样式 或 用 图 片 定义 项 目 符号 


项 目 符号 默认 是 实心 圆 点 ， 但 是 可 以 通过 样式 表 改 为 其 他 形式 。 对 于 无 序列 表 ， 我 们 
可 以 通过 type 属性 来 设置 其 值 为 disc( 实 心 圆 点 )、circle( 空 心 圆 点 )、square( 实 心 小 方块 ); 
对 于 有 序列 表 ， 我 们 也 可 以 通过 type 属性 来 设置 值 为 1、a、A、i、LI， 如 不 想 从 头 开始 ， 
我 们 还 可 以 通过 start 属性 来 设置 其 起 始 值 ， 比 如 start="3"， 代 码 显示 如 下 ， 运 行 效果 如 图 
5-9 所 示 。 

<div> 

<ol type="1" start="3"> 

<li><a title=" 第 五 天 超 链接 伪 类 " hre 人 vdiv_ css/906.shtml" target=" blank"> 第 五 天 超 链接 伪 类 

</a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " hre 伍 "/div_css/905.shtml" target="” blank"> 第 四 天 纵向 导航 菜单 

</a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 " hre 全 vdiv_css/904.shtml" target=" blank"> 第 三 天 二 列 和 三 列 

布局 </a></li> 

<li><a title=" 第 二 天 一 列 布局 " hre 伍 "/div_css/903.shtml" target="_blank"> 第 二 天 一 列 布局 </a></li> 

<li><a tile=" 第 一 天 ”XHTML CSS 基础 知识 " hre 人 vdiv_css/902.shtml" target=" blank"> 第 一 天 

XHTML CSS 基础 知识 </a></li> 


从 图 中 我 们 可 以 看 到 列表 的 项 目 符号 是 从 3 开始 ， 往 后 数 。 根 据 我 们 的 需要 ， 我 们 可 
以 设置 多 种 项 目 符号 类 型 ， 另外， 项 目 符号 还 可 以 是 图 像 形式 ， 其 代码 如 下 ， 运 行 效果 如 
图 5-10 所 示 。 
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5-9 改变 项 目 符号 样式 对 话 杠 5-10 图 像 定 义 项 目 符号 样式 运行 效果 


<!IDOCTYPE html > 

<head> 

<meta charset="utf-8" /> 

<title> 图 片 作 为 项 目 列表 的 符号 </title> 
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</style> 


<ol> 

<li><a title=" 第 五 天 超 链接 伪 类 " hre 全 div_ css/906.shtml" target=" blank"> 第 五 天 超 链接 伪 类 
</a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " hre 人 vdiv_ css/905.shtml" target=" blank"> 第 四 天 纵向 导航 菜单 
</a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 "hre 人 div_ css/904.shtml" target="” blank"> 第 三 天 二 列 和 三 列 
布局 </a></li> 

<li><a title=" 第 二 天 一 列 布局 " hre 伍 "/div_css/903.shtml" target="” blank"> 第 二 天 一 列 布局 </a></li> 
<li><a title=" 第 一 天 ”XHTML CSS 基础 知识 " hre 人 vdiv_css/902.shtml" target="” blank"> 第 一 天 
XHTML CSS 基础 知识 </a></li> 

</ol> 

</div> 

</body> 

</html> 





5.2.3 ”横向 图 文 列表 we ~ ~ ium 


= 


横向 图 文 列表 是 在 有 序列 表 的 基础 上 增 pe Pa iu 
=v 9 至 = 


加 图 片 并 让 列表 横向 排列 ,实现 效果 如 图 5-11 


所 示 。 
” 杭 向 图 广 列表 的 操作 消 名 如下 。 we ~ me me 


(1) 先 插入 如 下 html 代码 。 图 5-11 横向 图 文 列表 效果 图 
<div id= "layout"> 

<u> 

<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" 人 三 亚 </a></1i> 
<li><a hre 人 ="#"><img src=" 三 亚 .bmp" width="68" height="54" 广 三 亚 </a></1i> 
<li><a hre 人 ="#"><img src=" 三 亚 .bmp" width="68" height="$4" /> 三 亚 <a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="$54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="$54" /> 三 亚 </a></li> 
</ul> 

</div> 
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(2) 接 下 来 添加 CSS 样式 。 这 里 用 到 一 个 很 重要 的 CSS 属性 一 float。 先 添加 如 下 全 
局 样式 。 


body { margin:0 auto: font-size:12px:; font-family:Verdana; line-height:1.5:} 
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;} 


a el text-decoration:none;} 

ahover { color:#f00:} 

(3) 然后 让 每 个 i 元 素 浮动 起 来 ， 这 样 就 实现 了 横向 排列 ， 并 且 要 设置 好 文本 的 对 齐 
方式 ， 以 及 宽度 和 外 边 距 的 大 小 ，CSS 样式 设置 如 下 。 

#ayout ul li{width: 72px;float: left:margin-top: 20px:margin-left: 20px;} 

下 面 设置 a 标签 下 图 片 的 样式 , 设置 图 片 的 外 边 距 ， 
内 边 距 大 小 以 及 边框 属性 ，CSS 样式 设置 如 下 。 


开 DD 上 NSN 分 -下 分 因 OA ~» 


扒 a ulliai ing: in-bottom: ;border: 
pd oops 画 画 画 画 
为 了 获得 更 好 的 交互 效果 ， 这 里 增加 鼠标 划 过 时 的 | 了 
样式 , 注意 这 里 的 选择 器 写法 , CSS 样式 设置 如 下 所 示 。 ~ ~ ~ mm 


#ayout ul li ahover img {padding: Opx:border: 2px solid 


(4) 最 后 生成 的 效果 如 图 5-12 所 示 。 
对 应 的 代码 如 下 所 示 。 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

body { margin:0 auto; font-size:12px: font-family:Verdana; line-height:1.5:} 
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;} 


图 5-12 横向 图 文 排列 效果 图 
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<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img src=" 三亚.bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 ="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a hre 人 f="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img sre=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
</ul> 

</div> 

</body> 

</html> 
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洪 应 有 口 上 网 S 航 省 百度 -下 省 百度 四 OA 系统 » 





当 一 个 容器 内 的 元 素 都 浮动 后 ， 它 的 高 度 将 
不 会 随 着 内 部 元 素 高 度 的 增加 而 增加 ， 所 以 造成 
内 容 元 素 的 显示 超出 了 容器 ,为 了 便于 查看 效果 ， 


把 刚才 实例 中 的 fiayout 增加 一 个 边框 和 内 边 距 ， | 剖 曙 后 站 由 
代码 如 下 所 示 ， 效 果 如 图 5-13 所 示 。 = 


mn | ll i 
padding:2px;} Es Es EE 
请 观察 图 5-13 中 的 箭头 标示 处 , 该 容器 没有 5-13 ”浮动 后 文 元 素 高 度 自 适应 效果 图 
被 内 容 元 素 撑 高 ， 要 解决 这 个 问题 ， 需 要 使 用 以 
下 样式 : 
‘overflow:auto; zoom:1 
overflow:auto: 是 让 高 度 自 适 应 ，zoom:1: 是 为 了 兼容 正 6 而 写 , 对 于 目前 的 主流 浏览 器 




















单元 五 ”应 用 CSS 布 局 网 页 和 HTML 列 表 


只 需要 设置 overflow:auto 就 可 以 了 。 
【单元 小 结 】 


。 通过 CSS 布局 对 一 列 宽度 、 高 度 及 列 数 进 行 调整 。 
。 HTML 列表 的 高 级 运用 : 用 图 片 定 义 项 目 符号 、 横 向 图 文 列表 、 菜 单列 表 。 


【单元 自 测 】 


1. 要 想 使 DIV 一 列 固定 宽度 并 居中 ， 应 该 设置 CSS 的 哪个 属性 ? (  ) 
A. border:center; B. width:center; C. margin:auto:; D. 以 上 都 不 对 
2. 无 序列 表 和 有 序列 表 的 标签 名 分 别 是 ( 。 ”两 项 )。 
A.u B.l C.ol D.nl 
3.( “) 属 性 设置 只 影响 所 添加 图 像 的 显示 ， 而 原始 图 像 的 大 小 实际 上 不 会 改变 。 
A. “ 宽 ” 和 “高 ” B. 垂直 边 距 、 水 平 边 距 
C. 源 文件 D. 链接 
4. 要 想 使 列表 横向 排列 ， 应 该 在 CSS 里 添加 下 列 哪个 属性 ? ( ) 
A. margin B. float C. display D. overflow 
5. 要 想 使 列表 高 度 自 适应 ， 应 该 在 CSS 里 添加 下 列 哪个 属性 ? (。 ) 
A. margin B. float C. display D. overflow 


【上 机 实战 】 


上 机 目标 


。 掌握 基本 CSS 布局 方法 
。 使 用 列表 实现 特殊 效果 


上 机 练习 


练习 1: 对 页 面 进行 布局 


【问题 描述 】 
有 3 个 DIV， 分别 对 其 使 用 一 列 固定 宽度 、 一 列 自 适应 宽度 和 一 列 固定 宽度 居中 ， 


效果 如 图 5-14 所 示 。 





使 用 HTML 设 计 商 业 网 站 





【问题 分 析 】 OG me el 
这 类 布局 的 好 处 是 当 改 变 浏览 器 大 小 | 名 sn 9 om 3 zx-F ron 和 m3 


时 ， 可 以 按照 设置 要 求 灵活 地 改变 相应 内 容 
的 位 置 ， 使 其 看 起 来 更 美观 。 eid!e 
ielelelel 
参 昭 课本。 [人 
<IDOCTYPE html> 人 四 | 可/ 四 


<head> 图 5-14 一列 宽度 设置 效果 图 
<meta charset="utf-8" /> 
<title> 一 列 固 定 宽度 </title> 





<div id="layout" style="background:url(../img/eg_cute.gif})"><span style="color:#CC0000"> 一 列 固定 宽度 
</span></div> 

<div id="layout2" style="background:url(../img/eg_cute.gif)"><img src="../img/eg_cute.gif’ /><span 
style="color:#CC0000"> 一 列 自 适应 宽度 </span></div> 

<div id="layout3" style="background-url(../img/eg_cute.gif)"><img src="../img/eg_cute.gif"' /> 

<span style="color:#CC0000"> 一 列 固定 宽度 居中 </span></div> 

</body> 

</html> 











单元 五 ”应 用 CSS 布 局 网 页 和 HTML 列 表 














练习 2: 制作 列表 日 lyaaaaozoyirakr x 
己 |@ 1270018020/rsrHTMUhtmis/s 习 zhtmll_hbr， 人 女 ] § 
【问题 描述 】 汪 区 中 89 台 ER 下 攻击 司 Og 下 jnves 习 











实现 如 图 5-15 所 示 的 图 文 列 表 。 | | 
这 个 图 片 列表 宽 500 像素 ， 其 中 有 3 LA A 人 | 
六 文 主祭 是 文 这 标题 


张 图 片 ， 并 且 每 张 图片 下 方 都 带 有 文字 链 


接 。 此 图 片 列表 的 HTML 代码 如 下 。 
<div id="imglist"> 
<u> 
<li><a href="#" target="_ blank"><img src="../img/eg_cute.gif" border="0" /><span> 文 字 标题 
</span></a></li> 
<li><a href="#" target="_ blank"><img src="../img/eg_cute.gif" border="0" /><span> 文 字 标题 
</span></a></li> 








5-15 ”横向 图 文 列表 


将 此 段 HTML 代码 复制 到 HTML 编辑 工具 中 的 网 页 源 代码 中 预览 ， 此 刻 ， 页 面 必 然 
是 错乱 的 ， 下 面 我 们 再 一 步 一 步 将 CSS 完善 。 
(1) 全 局 定义 。 


body,td,th { 
font-size: 14px: 
} 

uli{ 
padding:0; 
margin:0; 
list-style:none: 
} 

ahover { 
color:#CCFF00; 
} 


(2) 定义 容器 宽度 和 列表 宽度 。 


大 mglist { 
width:788px; 
border:1px solid #b5b5b5; 
margin:0 auto; 
clear:both:; 
height:176px:; 
padding:22px 0 0 0: 
} 
ee 











使 用 HTML 设 计 商 业 网 站 


float:left: 
text-align:center; 
line-height:30px; 
margin:0 0 0 27px:; 
width:125px: 
white-space:nowrap; 
overflow:hidden; 
displayinline: 
##mglist li span { 
display:block; 
| 

(3) 添加 对 图 片 限制 的 CSS。 

#imglist li img { 
width:123px: 
height:123px: 
border:1px solid #b5b5b5; 
} 


经 过 上 述 步骤 ， 这 个 列表 应 该 算是 一 个 比较 严谨 的 图 片 列表 布局 了 。 


【拓展 作业 】 


模仿 百度 图 片 搜索 功 能 显示 图 片 列表 ， 效 果 如 图 5-16 所 示 


sans < 
€ > © | ge |https//www.baiducom/siwd- 风 黑 &rsv_spt-18rsv iqid-Cxf5e96e1a00.. 会 | 让 
玉 应 用 口 上 网 S 和 % 省 ER 一下 当 百 术 辐 OAR% 上 四 jv 


Bai 澳 ems 








网 页 新 闻 贴吧 。 知 章 享乐 图 片 视频 地 图 文库 更 多 > 


图 5-16 显示 图 片 列表 








= 人 


应 用 CSS 设置 链接 和 号 航 荣 蛙 


© 课程 目标 


PP 掌握 如 何 使 用 超 链 接 伪 类 
PP 掌握 如 何 使 用 CSS 进行 表单 设计 
PP 掌握 如 何 使 用 CSS 美化 导航 菜单 





使 用 HTML 设 计 商 业 网 站 


他 户 省 丰 
本 章 主要 学 习 CSS 的 一 些 高 级 运用 。 超 链接 伪 类 用 于 向 某 些 选择 器 添加 特殊 的 效果 ， 
另外 ， 通 过 CSS 可 以 对 表单 以 及 导航 菜单 进行 优化 ， 使 页 面 更 加 美观 。 


6.1 超 链 接 伪 类 的 应 用 


6.1.1 超 链接 的 4 种 样式 


超 链接 可 以 说 是 网 页 发 展 史上 的 一 个 伟大 发 明 ， 它 使 得 许多 页 面相 互 链 接 ， 从 而 构成 
一 个 网 站 。 说 到 超 链 接 ， 它 涉及 一 个 新 的 概念 一 一 伪 类 ， 我 们 先 看 下 超 链接 的 4 种 样式 。 

alink {color: 性 F0000} /* 未 访问 的 链接 */ 

avisited {color: #00FF00} /* 已 访问 的 链接 类 

ahover {color: 姓 FOOFF} /* 鼠标 移动 到 链接 上 */ 

aactive {color: #0000FF} /* 选 定 的 链接 */ 

以 上 分 别 定义 了 超 链 接 未 访问 时 的 链接 样式 、 已 访问 的 链接 样式 、 鼠 标 移 上 时 的 链接 
样式 和 选 定 的 链接 样式 。 之 所 以 称 之 为 伪 类 ， 是 因为 它 不 是 一 个 真实 的 类 ， 正 常 的 类 是 以 
点 开始 ， 后 边 跟 一 个 名 称 ， 而 它 是 以 a 开始 ， 后 边 跟 个 冒号 ， 再 跟 个 状态 限定 字符 。 例 如 ， 
第 3 个 a:hover 的 样式 ， 只 有 当 鼠 标 移动 到 该 链接 上 时 它 才 生效 ， 而 a:visited 只 对 已 访问 过 
的 链接 生效 。 伪 类 使 得 用 户 体验 大 大 提高 ， 例 如 ， 我 们 可 以 设置 鼠标 移 上 时 改变 颜色 或 下 
划 线 等 属性 来 告知 用 户 这 是 可 以 单 击 的 ;设置 已 访问 过 的 链接 的 颜色 变 灰 暗 或 加 删除 线 来 
告知 用 户 这 个 链接 的 内 容 已 访问 过 了 。 

下 面 通过 做 一 个 默认 状态 下 是 蓝 色 、 鼠 标 放 上 去 时 是 
红色 加 下 划 线 、 选 定 ( 按 下 ) 时 为 紫色 、 已 访问 过 为 灰色 加 CE 人 
删除 线 的 实例 来 讲解 一 下 。 首 先 插入 3 个 带 超 链接 的 内 党 站 上 9 六 相生 二 
容 ， 代 码 如 下 ， 效 果 如 图 6-1 所 示 。 

<p><a hre 伍 "#"> 这 里 是 链接 </a></p> 

<p><a hre 全 "www.baidu.com"> 这 里 是 百度 链接 </a></p> 

<p><a hre 全 "10.html"> 这 里 也 是 链接 </a></p> 

从 图 6-1 中 可 以 看 出 ， 插 入 的 超 链接 默认 是 蓝 色 带 下 本 
划 线 的 ， 这 是 标签 的 默认 样式 所 致 ， 接 下 来 ， 我 们 定义 未 it x 
访问 超 链 接 的 样式 ， 代 码 如 下 ， 效 果 如 图 6-2 所 示 。 pe LT 

ailink { color: yellowgreen; text-decoration: none: } 

设置 完 a:link 的 样式 后 ， 下 面 分 别 设置 a:visited、 
a:hover 和 a:active 的 样式 。 6-2 未 访问 超 链 接 











单元 六 ”应 用 CSS 设 置 链接 和 导航 菜单 


代码 如 下 ， 效 果 如 图 6-3 所 示 。 


<!DOCTYPE html> 
<head> 

<meta charsetEutE8" /> CG [© 127001:8020/firstH.. 女 | ; 
<style type="text/css"> 汪 二 用 站 上 网 8 航 党 百度 -下 党 百 度 » 
alink { color: yellowgreen; text-decoration: none: } 这 里 是 链接 
avisited {color:red:;} 这 时 是 再 语族 党 
ahover{color: darkgoldenrod:text-decoration: underline:} 这 旦 也 是 多 接 
aiactive{color: brown:text-decoration: line-throusgh:} 127.00.1:8020/fi.. 


</style> 6-3 ”访问 过 程 中 的 超 链接 
</head> 

















<body> 

<p><a hre 仁 "#"'> 这 里 是 链接 </a></p> 

<p><a hre 全 "www.baidu.com"> 这 里 是 百度 链接 </a></p> 
<p><a hre 人 "10.html"> 这 里 也 是 链接 </a></p> 

</body> 

</html> 


$/ 往 计 二 .== I 


4 种 状态 的 顺序 一 定 不 能 颠倒 ， 否则 有 些 不 会 生效 。 


6.1.2 ”将 链接 转换 为 块 级 元 素 


链接 在 默认 状态 下 是 内 联 元 素 ， 转 换 为 块 级 元 素 后 可 以 获得 更 大 的 单 击 区 域 。 可 以 设 
置 宽度 和 高 度 ， 将 链接 转换 为 块 状 ， 只 需 增 加 一 个 display:block 的 css 属性 即 可 ， 其 CSS 
文件 代码 如 下 ， 效 果 如 图 6-4 所 示 。 

a { display: block: height: 30px; width: 100px: line-height: 30px: text-align: center: background: #CCC; } 

这 样 设置 的 结果 是 全 局 a 都 执行 这 个 样式 的 显示 。 

接 下 来 设置 一 下 鼠标 移动 到 链接 上 时 的 状态 ， 其 他 几 种 状态 的 设置 方法 一 样 ， 代 码 如 

效果 如 图 6-5 所 示 。 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

a { display: block; height: 30px: width: 100px: line-height: 30px: text-align: center: background: #CCC:; } 
ahover { color: #FFF:; text-decoration: none; background: #333; } 
</style> 

</head> 

<body> 

<p><a hre 舍 "如 > 这 里 是 链接 </a></p> 

<p><a hre 人 "www .baidu.com"> 这 里 是 百度 链接 </a></p> 
<p><a hre 全 "10.html"> 这 里 也 是 链接 </a></p> 

</body> 

</html> 











使 用 HTML 设 计 商 业 网 站 


GC [© 127001:8020/firsth.. 女 | 让 
弱 地 用 站 上 网 s 及 将 百度 -下 将 百度 > 








图 6-4 链接 的 块 状 显示 图 6-5 鼠标 移动 到 链接 上 的 块 状 显示 


6.1.3 用 CSS 制作 按钮 


学 会 了 把 超 链接 转换 为 块 级 元 素 ， 想 制作 一 个 css 按钮 简直 太 简单 了 ， 只 需 在 上 一 步 
的 基础 上 增加 一 个 按钮 的 背景 图 片 即 可 实现 ,下面 以 制作 淘宝 网 首页 的 免费 注册 按钮 为 例 ， 
来 讲解 设置 最 常用 的 默认 样式 和 鼠标 划 过 时 的 样式 。 

首先 需要 准备 默认 状态 和 鼠标 划 过 状态 的 图 片 ， 如 图 6-6 所 示 。 


LL /到 


图 6-6 默认 状态 和 鼠标 滑 过 状态 图 片 


修改 之 前 的 HTML 如 下 ， 然 后 重新 定义 CSS 样式 ， 
<p><a hre 伍 "#'> 免 费 注册 </a></p> 
生成 的 html 代码 如 下 ， 效 果 如 图 6-7。 


<!IDOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

a { display: block; height: 34px; width: 107px: line-height: 2; text-align: center; background: 
url(img/white_btn.png) no-repeat Opx Opx: color: #d84700: font-size: 14px: font-weight: bold: text-decoration: 
none; padding-top: 3px; } 

ashover { background: url(../img/gray_btn.png) no-repeat Opx Opx;} 

</style> 

</head> 


D 127.0.0.1:8020/firstHT) x 
C [© 127.001:8020/firtH.. 女 | : 


<body> 
<p><a hre 伍 "#'> 免 费 注册 </a></p> 


</body> 有 本 
漠 应 用 站 上 网 SW 省 百度 -下 闸 百度 





127.0.0.1:8020/fi.. 


6.1.4 首 字 下 沉 图 6-7 鼠标 滑 过 状态 按钮 


首 字 下 沉 是 CSS 伪 类 上 的 又 一 个 运用 ， 它 可 以 直接 通过 CSS 样式 表 为 某 个 选择 器 中 
的 文本 首 字母 添加 特殊 的 样式 ， 而 不 需要 给 首 字 添 加 一 个 标签 或 通过 程序 来 实现 。 现 在 以 











单元 六 ”应 用 CSS 设 置 链接 和 导航 菜单 


制作 Word 里 的 首 字 下 沉 为 例 来 讲解 ， 应 用 如 下 伪 元 素 。 
:first-letter 
在 页 面 中 添加 如 下 一 段 内 容 ， 只 通过 设置 样式 就 可 以 实现 首 字 下 沉 了 。 
<p>SVSE8.0 HTML 网 页 设计 </p> 
为 了 便于 观察 效果 ， 我 们 设置 p 的 样式 如 下 。 
p { width: 400px: line-height: 1.5; font-size: 14px: } 
然后 设置 p:first-letter 的 样式 ， 代 码 如 下 ， 效 果 图 如 图 6-8 所 示 。 
<!IDOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<style type="text/css"> 
Pp { width: 400px; line-height: 1.5; font-size: 14px: } 
Pp:first-letter { font-family: "microsoft yahei": font-size: 40px: 


float: left; padding-right: 10px:; line-height: 1; } © |@ 127.00.1:8020/firstH.. 女 ] : 
</style> 洪 应 用 站 LS 六 省 二 度 - 下 省 下 本 » 


</head> S VSE8.0 HTML 网 页 设计 





<body> 
<p>SVSE8.0 HTML 网 页 设计 </p> 
</body> 
</html> 


6.2 应 用 CSS 美化 表 蛙 元 素 


6.2.1 改变 文本 框 和 文本 域 样式 


先 说 一 下 文本 框 ， 文 本 框 和 文本 域 都 是 可 以 用 CSS 进行 美化 的 。 比 如 改变 边框 粗细 、 
颜色 ， 添 加 背景 色 和 背景 图 像 等 。 请 看 下 面 的 实例 ， 效 果 如 图 6-9 所 示 。 

.textl { border:1px solid #f60; color#03C:} 

.text2 { border:2px solid #390; width:200px: height:28px: font-size:16px: font-weight:bold:; 
line-height:1.6:} 

.text3 { border:2px solid #C3C: height:30px; background:#ffeeff url(lock.gif) right 3px no-repeat:} 

.text4 { border:2px solid #F60; width:150px: height:80px:font-size:16px: line-height:1.6; 

background:url(xiaobing.gif) right no-repeat;} 

这 4 个 样式 表 分 别 对 应 第 2、3、4、5 行 表 单 ， 第 1 行 是 文本 框 的 默认 样式 ; 第 2 行 
为 设置 边框 和 字体 颜色 的 样式 ; 第 3 行为 设置 边框 、 宽 度 、 高 度 、 字 体 大 小 和 行 高 的 样式 ; 
第 4 行为 设置 边框 、 增 加 背景 色 和 背景 图 片 ， 第 5 行为 增加 一 个 gif 动画 的 背景 图 片 ， 这 
样 看 起 来 是 不 是 生动 了 许多 ? 具体 步骤 不 再 袭 述 。 
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图 6-9 改变 文本 框 和 文本 样式 
下 面 我 们 看 一 下 文本 域 的 样式 设置 。 


.area { border:1px solid #F90; overflow:auto: background:#fff url(net_bg.gif) right bottom no-repeat; 
width:99%:; height:100px;} 


图 6-9 中 第 1 个 为 默认 的 文本 域 样式 ， 下 边 为 设置 边框 、 宽 度 百分比 、 高 度 和 背景 图 
片 后 的 样式 。overflow:auto 定义 当 内 容 不 超过 现在 文本 域 高 度 时 不 出 现 滚动 条 。 下 面 运行 
一 下 代码 ， 看 看 两 者 的 效果 吧 。 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

.textl { border:1px solid #f60: color:-#03C:} 

.text2 { border:2px solid #390; width:200px; height:28px: font-size:16px: font-weight:bold: 
line-height:1.6;} 

.text3 { border:2px solid #C3C: height:30px; background:#ffeeff url(lock.gif) right 3px no-repeat:} 

.text4 { border:2px solid #F60; width:150px: height:80px:font-size:16px: line-height:1.6; 


<input type="text" name="textfield" id="textfield" /> 这 是 默认 样式 

<p> 

<p> 

<input name="textfield2" type="text" class="textl" id="textfield2" value=" 我 是 蓝 色 的 " /> 
这 是 改变 边框 的 样式 和 文字 颜色 

<p> 
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<p 

<input name="textfield3" type="text" class="text2" id="textfield3" value=" 看 我 大 吧 " /> 
这 是 改变 边框 并 设置 高 宽 和 字体 大 小 的 样式 

sp 

<p> 

<input class="text3" type="text" name="textfield4" id="textfield4" /> 

这 是 增加 背景 图 片 实例 ， 也 可 放 左 侧 

<p> 

<input class="text4" type="text" name="textfield5" id="textfield5" /> 

这 是 增加 了 一 个 背景 图 片 为 gf 动画 

<p> 

<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> 

<p> 

a 

<textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea> 
<p> 

</body> 

</html> 


6.2.2 ”用 图 片 美化 按钮 


按钮 也 是 网 页 中 常见 的 元 素 ， 但 默认 的 样式 有 时 候 和 页 面 整 体 效果 不 协调 ， 需 要 把 它 
美化 一 下 ， 按 钮 的 样式 设置 和 文本 框 如 出 一 禾 ， 没 有 什么 特别 之 处 。 下 面 以 3 个 实例 进行 
说 明 ， 代 码 如 下 ， 效 果 如 图 6-10 所 示 。 

.btn02 { background:#fff url(btn_bg2.gib 0 0: height:22px:; width:SSpx: color:#297405; border:1px solid 

#90be4a; font-size:12px; font-weight:bold: line-height:18096: cursor:pointer:} 
.btn04 { background:url(btn_bg2.gib 0 -24px: width:70px: height:22px: color:#9a4501:; border:1px solid 
#dbb119; font-size:12px: line-height:160%6; cursor:pointer:} 

.btn07 { background:url(submit_ bg.gif) Opx -8px; border:1px solid #cfab25; height:32px; font-weight:bold; 

padding-top:2px; cursor:pointer: font-size:14px: color:#660000:} 

.btn08 { background:url(submit_bg.gif) Opx -64px; border:1px solid #8b9c56; height:32px:; font-weight:bold; 

padding-top:2px; cursor:pointer: font-size:14px: color:#360:} 

.btn09 { background:url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat: 

width:107px: height:37px; border-none; font-size:14px: font-weightbold: color#d84700: cursor:pointer;} 

图 6-10 中 的 按钮 ， 前 两 个 为 固定 宽度 ， 但 宽度 可 一 
以 根据 需要 随意 调整 ， 中 间 两 个 为 自 适 应 宽度 ， 根 据 © [Dire 
字数 多 少 来 适应 。 这 4 个 样式 都 是 采用 一 个 背景 图 片 | 
横向 循环 实现 ， 所 以 宽度 不 受 限制 。 最 后 一 个 完全 采 

et 这 样 宽度 就 得 固定 不 变 ， 否 则 会 影响 美 

。 需 要 注意 的 是 这 种 方式 需要 去 掉 按钮 边框 。 

采用 以 上 按钮 有 一 个 好 处 , 即 当 CSS 样式 表 没 有 
加 载 上 时 ， 将 会 显示 为 默认 按钮 样式 ， 这 样 用 户 可 以 








图 6-10 图 片 美化 按钮 
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清楚 地 知道 这 是 个 按钮 ， 正 常 加 载 后 ， 会 使 按钮 更 加 美观 。 图 片 美化 按钮 和 我 们 前 面 所 讲 
的 CSS 按钮 有 所 不 同 ， 前 面 所 讲 的 按钮 实际 还 是 个 链接 ， 而 这 里 的 是 按钮 元 素 。( 注 : 不 
同 浏览 器 下 显示 效果 略 有 不 同 。) 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8" /> 

<style type="text/css"> 

.btn02 { background:#ffF url(btn bg2.gif) 0 0; height:22px; width:55px:; color:#297405; border:1px solid 
#90be4a; font-size:12px: font-weight:bold: line-height:180%:; cursor:pointer:} 

.btn04 { background:url(btn bg2.gib 0 -24px; width:70px; height:22px: color:#9a4501; border:lpx solid 
#dbb119; font-size:12px; line-height:160%; cursor:pointer:} 

-btn07 { background:url(submit_ bg,.gif) Opx -8px; border:1px solid #cfab25; height:32px; font-weight:bold; 
padding-top:2px; cursor:pointer: font-size:14px; color:#660000:} 

.btn08 { background:url(submit bg.gif) Opx -64px: border:1px solid #8b9c56; height:32px; font-weight:bold:; 
padding-top:2px; cursor:pointer: font-size:14px; color:-#360:} 

.btn09 { background:url(btn.gif) 0 0 no-repeat: width:107px: height:37px: bordernone: font-size:14px: 
font-weight:bold:; color:#d84700: cursor:pointer:} 

</style> 


<input name="button" type="submit" class="btn02" id="button" value=" 提 交 " /> 
<p> 

“p> 

<input name="button2" type="submit" class="btn04" id="button2" value=" 提 交 " /> 
<p> 

p> 

<input name="button" type="submit" class="btn07" id="button" value=" 提 交 " /> 
<p> 


<p> 

<input name="button2" type="submit" class="btn08" id="button2" value=" 看 看 我 的 宽度 有 多 宽 " /> 
</p> 

<p> 

<input name="button" type="submit" class="btn09" id="button" value=" 免 费 注册 " /> 

<p> 

</body> 

</html> 


6.2.3 ”改变 下 拉 列 表 样 式 


正 6 对 下 拉 列 表 的 背景 和 宽度 样式 生效 , 其 他 绝 大 部 分 不 生效 , 下 11 有 对 边框 和 高 度 
的 支持 ,但 这 似乎 离 我 们 的 要 求 还 很 远 , 所 以 不 得 不 寻求 其 他 的 办 法 。 先 来 看 下 面 3 个 图 (图 
6-11 一 图 6-13)， 同 一 代码 分 别 在 正 6、google、IE 11 浏览 器 下 显示 的 差异 吧 。 











单元 六 ”应 用 CSS 设 置 链接 和 导航 菜单 


© [© 127.00.1:8020/firstH.. 女 ] : 
洪 应 用 站 上 网 航 党 百度 -下 党 百度 ”» 





请 选择 项 一 一 





图 6-12 google 中 下 拉 列 表 样式 效果 图 6-13 正 11 中 下 拉 列 表 样式 效果 


<!DOCTYPE html> 
<head> 
<meta charset="UTF-8" /> 
<style type="text/css"> 
:select { border:1px solid #f60:; background:#FF9: height:30px:} 
tip { width:S0px; border:1px solid #ecc: background:#fff: position:absolute; top:Spx: left:70px: 
font size:12px; height:100px; padding:5px:} 
</style> 


</head> 


<body> 

<p> 请 选择 项 目 </p> 

ba 

<select name="select" id="select" class="select"> 
<option> 请 选择 ----------------</option> 
<option> 标 准 之 路 </option> 

</select> 

<p> 

<div class="tip"> 看 看 谁 能 把 我 挡 着 </div> 
/body> 

</html> 


3 个 浏览 器 下 的 显示 都 不 尽 相 同 ， 所 以 最 好 是 寻求 其 他 的 办 法 或 者 使 用 默认 样式 。 其 
中 ， 下 6 浏览 器 下 被 遮挡 ， 可 以 把 浮动 层 设 为 这 ame， 因 为 下 拉 列 表 不 会 跑 到 过 ame 上 边 。 
有 更 高 美化 需求 的 可 以 用 div 模拟 来 代 蔡 下 拉 列 表 ， 但 这 种 方法 实现 起 来 比较 麻烦 ， 由 于 
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时 间 关 系 ， 本 节 不 做 过 多 介绍 。 


6.2.4 用 label 标签 提升 用 户 体验 


label 标签 常常 被 大 家 忽略 ， 合 理 利 用 它 会 使 页 面 的 用 户 体验 得 到 提升 。 我 们 可 以 对 表 
单 的 说 明文 字 使 用 label 标签 ， 这 样 当 用 户 单 击 文字 时 ， 光 标 就 会 定位 到 表单 上 。 

如 图 6-14 所 示 ， 当 单 击 “ 姓 名 ”文字 时 ， 
光标 就 会 定位 到 后 边 的 文本 框 ; 单 击 “ 男 ”、 © [@1z70018020stHTMUhimlbhabe。， 太 | : 
“ 女 ” 文 字 也 会 选中 相应 的 选项 ， 同 理 ， 复 选 | 洁 吕 DHnS% 全 Be 全 Ew 上 oN | 
框 和 文本 域 也 是 如 此 。 [一 

<!IDOCTYPE html > : 9 男 9 女 

<head> : 目 听 音乐 日 上 网 日 看 书 

<meta charset="utf-8" /> 

<style type="text/css"> 











<input type="radio" name="sex" id="male" value="radio" /><label for="male"> 男 </label> 
<input type="radio" name="sex" id="female" value="radio2" /><label for="female"> 女 </label></p> 
<p> 爱 好 : 

<input type="checkbox" name="music" id="music" /><label for="music"> 听 音乐 </label> 
<input type="checkbox" name="web" id="web" /><label for="web"> 上 网 </label> 

<input type="checkbox" name="book" id="book" /><label for="book"> 看 书 </label></p> 
A 

<label for="content"> 简 历 : </label> 

<textarea name="content" id="content" cols="45" rows="5"></textarea> 

<p> 

<p>&nbsp;</p> 

<p>&nbsp; </p> 

</body> 

</html> 


6.3.1 横向 列表 菜单 


第 5 章 学 过 横向 列表 ， 又 学 习 了 float 属性 ， 那 么 要 实现 横向 列表 菜单 就 很 简单 了 ， 只 
需 把 下 横向 排列 即 可 。 代 码 如 下 ， 效 果 如 图 6-15 所 示 。 
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<!IDOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

body { font-family: Verdana: font-size: 12px;: line-height: 1.S: } 
a { color: #000; text-decoration: none; } 

ahover { color: #00; } 

#menu { border: 1px solid #CCC; height:26px; background: #eee;} 
#menu ul { list-style: none; margin: Opx; padding: Opx; } 
#menu ul li { floatleft; padding: Opx 8px; height: 26px; line-height: 26px: } 
</style> 

</head> 

<body> 

<div id="menu"> 

<u> 

<li><a hre 伍 "#"> 首 页 </a></li> 

<li><a hre 伍 "#"> 网 页 版 式 布局 </a></li> 

<li><a hre 伍 "#">divtess 教程 </a></li> 

<li><a hre 伍 "#">divtcss 实例 </a></li> 

<li><a hre 伍 "#"> 常 用 代码 </a></li> 

<u> 

</div> 

</body> 

</html> 


横向 列表 菜单 最 主要 就 是 用 float 让 li 向 右 浮动 后 , 实现 横向 排列 , 具体 步 又 不 再 袭 述 。 


以 前 有 人 提问 怎么 让 它 水 平 居 中 , 其 实 很 简单 , 首先 使 导航 的 宽度 固定 , 然后 设置 margin:0 
auto; 即 可 实现 ，CSS 代码 如 下 ， 效 果 如 图 6-16 所 示 。 


#menu {border:1px solid #CCC:height:26px:width:370px:background:#eee;margin: 0 auto;} 
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六 页 网 RE< 和 号 dv+css 才 程 div+Css 实 全 若 用 代 到 
首页 ”网 页 版 式 布局 ”div+css 教 程 “div+css 实 例 ”过 用 代码 


图 6-15 横向 列表 菜单 图 6-16 设置 方 框 属性 


为 了 用 户 体验 更 加 友好 ， 可 以 把 a 转换 成 块 级 元 素 ， 也 可 以 给 a 设置 背景 色 或 背景 图 
片 使 它 更 加 美观 ， 然 后 再 设置 鼠标 放 上 时 的 样式 。 


#menu { width:370px; margin:0 auto; border: 1px solid #CCC: height:26px: background: #eee:} 
#menu ul { list-style: none; margin: Opx; padding: Opx; } 

#menu ul li { float:left:} 

#menu ul li a { display:block: padding: Opx 8px; height: 26px; line-height: 26px; float:left;} 
#menu ul li a:hover { backeground:#333; color-#fff:} 
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经 过 修改 ， 现 在 的 用 户 体验 是 不 是 更 加 友好 了 呢 ? 如 图 6-17 所 示 。 
这 里 的 #menu ul i a 本 来 是 可 以 不 加 
float:left 的 ， 但 正 6 中 ,在 fi 没有 设置 宽度 、 @ [@ 127.0018020/fistHTMUhimi6/ 信 向 列 e 芝 ht。 全 | 3 
#menu ul lia 设置 了 display:block 的 情况 下 ,将 | 三 村 = 一 一 一 
会 显示 错乱 ， 所 以 需要 在 a 上 增加 float:left 来 
修正 。 
至 此 ， 常 用 的 样式 大 部 分 都 涉及 了 ， 为 了 
提高 效率 ， 建 议 大 家 还 是 手写 代码 ， 如 果 你 还 
不 能 手写 代码 , 就 参考 前 面 的 样式 , 自己 在 css | ma | 
编辑 器 里 设置 吧 。 图 6-17 横向 列表 菜单 水 平 居中 效果 图 


6.3.2 用 图 片 美化 的 横向 导航 


背景 图 片 也 是 网 页 制作 当中 最 常用 的 样式 之 一 。 运 用 好 背景 图 片 ， 可 以 使 用 户 的 页 面 
更 加 出 色 、 更 加 入 性 化 ， 而 且 还 会 拥有 更 快 的 加 载 速度 ， 显 示 效 果 如 下 。 


EE Web 教程。 web 实 例 。 常用 代码 


其 中 ， 用 到 3 张 图 片 ， 分 别 为 当前 状态 、 鼠 标 放 上 时 的 样式 和 默认 样式 用 的 图 片 。 


bad | 
下 面 修改 css 样式 ， 添 加 上 背景 图 片 ，CSS 文件 如 下 。 


#menu { width:500px; height:28px: margin:0 auto: border-bottom:3px solid #E10001:;} 

#menu ul { list-style: none; margin: Opx: padding: 0px: } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a { display:block; width:87px; height:28px:; line-height:28px; text-align:center; 
background-url(btn_silver.gif) 0 0 no-repeat: font-size:14px:} 

#menu ul li a:hover { background:url(btn_pink.gif) 0 0 no-repeat:} 

#menu ul li a#current { background:-url(btn_red.gif) 0 0 no-repeat: font-weight:bold; color:-#ffE} 


为 了 让 用 户 知道 当前 所 处 的 页 面 ， 再 做 一 个 当前 页 面 的 状态 ， 把 ID 添加 到 相应 的 a 上 。 


<!DOCTYPE html > 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

body { font-family: Verdana: font-size: 12px: line-height: 1.5; } 

a { color: #000; text-decoration: none: } 

ahover { color: #F00; } 

#menu { width:500px; height:28px: margin:0 auto; border-bottom:3px solid #E10001;} 

#menu ul { list-style: none; margin: Opx: padding: Opx; } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a { display:block:; width:87px; height:28px: line-height:28px; text-align:center; 
background:url(btn_silver.gif) 0 0 no-repeat: font-size:14px:} 

#menu ul li a:hover { background:url(btn pink.gif) 0 0 no-repeat:} 

#menu ul li a#current { background:url(btn red.gif) 0 0 no-repeat: font-weight:bold; color:#fE} 
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</style> 
</head> 

<body> 

<div id="menu"> 

<u> 

<li><a id="current" href="#'> 首 页 </a></li> 
<li><a hre 伍 "#"> 网 页 版 式 </a></li> 

<li><a hre 伍 "#">web 教程 </a></li> 

<li><a hre 仁 "#">web 实例 </a></li> 

<li><a hre 伍 "#"> 常 用 代码 </a></li> 


6.3.3 CSS Sprites 技术 


在 国内 ,很 多 人 将 CSS Sprites 称 为 CSS 精灵 或 CSS 雪 括 。 它 把 网 页 中 的 一 些 背 景 图 片 
整合 到 一 张 图 片 文件 中 ,再 利用 CSS 的 背景 图 片 定 位 到 要 显示 的 位 置 。 这 样 做 可 以 减少 文 
件 体 积 ， 减 少 对 服务 器 的 请 求 次 数 ， 提 高 效率 。 

介绍 CSS Sprites 之 前 ， 先 把 背景 图 片 给 搞 清楚 。 

#menu ul li a { background-#ccc url(btn_silver.gif) 0 0 no-repeat; } 

CSS 背景 属性 缩写 后 如 上 所 示 ，#ccce 表示 背景 色 ; wrl0 里 是 背景 图 片 路 径 ， 接 下 来 的 
两 个 数值 参数 分 别 是 左右 和 上 下 ， 第 一 个 参数 表示 距 左边 多 少 px， 第 二 个 参数 表示 距 上 边 
多 少 px， 这 和 padding 的 简写 方式 不 一 样 ， 一 定 不 要 混淆 。 另 外 ， 再 强调 一 点 : 当 CSS 中 
值 为 0 时 可 以 不 带 单 位 ， 其 他 数值 都 必须 带 单 位 (line-height 值 为 多 少 倍 时 ，zoom、z-index 
除外 )，no-repeat 表示 背景 图 片 向 哪个 方向 重复 ， 此 时 为 不 重复 。 

还 需 说 明 的 一 点 是 ， 定 位 图 片 位 置 的 参数 是 以 图 片 的 左上 角 为 原点 的 。 理 解 了 这 些 ， 
CSS Sprites 技术 基本 上 就 伐 了 ， 就 是 靠背 景 图 片 定位 来 实现 。 把 三 张 背景 图 片 整合 到 一 
张 上 ， 如 图 6-18 所 示 。 

<!DOCTYPE htm> 

<head> | 

<meta charset="utf-8" /> | 

<style type="text/css"> 

body { font-family: Verdana; font-size: 12px: line-height: 1.5; } 

a { color: #000; a 3 隐 和 8 国 片 天生 项 果 国 

ahover { color: #E00; } 

#menu { width:500px; height:28px: margin:0 auto: border-bottom:3px solid #E10001:;} 

#menu ul { list-style: none; margin: Opx; padding: Opx; } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a { display:block: width:87px: height:28px; line-height:28px; text-align:center; 

background:url(btn_ Sprites.gif) 0 -28px no-repeat: font-size:14px:} 

#menu ul li a:hover { background:url(btn Sprites.gif) 0 -56px no-repeat:} 

#menu ul li a#current { background-url(btn_ Sprites.gif) 0 0 no-repeat; font-weight:bold:; color-#fff:} 
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</style> 

</head> 

<body> 

<divid="menu"> 

<u> 

<li><a id="current" hre 伍 "#'> 首 页 </a></li> 
<li><a hre 伍 "#"> 网 页 版 式 </a></li> 
<li><a hre 伍 "#">web 教程 </a></li> 
<li><a hre 仁 "#">web 实例 </a></li> 
<li><a hre 伍 "#"> 常 用 代码 </a></li> 


设置 好 后 的 效果 如 图 6-19 所 示 。 
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3 me we | websm | RE 
大 家 上 网 冲浪 时 ， 会 看 到 很 多 菜单 


列表 ， 一 个 主 菜单 下 可 能 会 有 二 级 菜单 
及 三 级 菜单 ， 菜 单列 表 已 经 成 为 网 页 的 
重要 组 成 部 分 。 在 网 页 的 导航 栏 上 通常 
也 会 有 菜单 列表 的 出 现 ， 能 够 给 我 们 呈 
现 出 大 量 的 信息 ， 通 常 一 级 菜单 内 容 都 
是 言 简 意 凡 ， 通 过 比较 简短 的 文字 来 说 明 核心 内 容 ， 然 后 通过 二 级 菜单 来 把 一 级 菜单 分 成 
几 个 部 分 ， 后 面 链接 来 呈现 具体 内 容 ， 菜 单列 表 的 HTML 代码 具体 如 下 。 


<div class="menu"> 
<u> 
<li><a hre 全 "jp> 手 机 数码 </a> 
<u> 
<li><a hre 伍 "# > 小 米 </a></li> 
<li><a hre 全 "> 华为 </a></1i> 
<li><a href="#">OPPO</a></li> 
<li><a hre 人 ="#"> 魅 族 </a></li> 
</ul> 
<> 
<li><a hre 伍 "# 人 > 品牌 家 电 </a></li> 
<li><a hre 伍 "人 > 衣服 鞋 包 </a></li> 
<li><a hre 伍 "#> 生 鲜 速 冻 </a></li> 
<li><a hre 伍 "##' > 建材 家 居 </a></li> 
<u> 
<div> 


把 上 述 HTML 文件 修饰 成 一 个 菜单 列表 ， 具 体 CSS 代码 如 下 ， 运 行 效果 如 图 6-20 
所 示 。 


图 6-19 用 CSS Sprites 技术 设置 背景 图 片 效果 图 
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<style type="text/css"> 
body{padding-top: 100px;text-align: center:} 
.menu {border: 2px solid dimgray;overflow: hidden:display: inline-block:} 
.menu af{text-decoration: none:} 
.menu ul,.menu li{list-style: none:margin: 0:padding: 0:float: left:} 
.menu > ul > li > ul{position: absolute;display: none;} 
menu > ul >1i>ul> 1i{float: none;} 
.menu > ul > li:hover ul{display: block:} 
.menu > ul > li >a{width: 120px:line-height: 40px:color: black:background-color: 
lightpink:;text-align: centerborder-left: 1px solid red;display: block:} 
.menu >ul >li:first-child >a {border-left: none:} 
.menu > ul >1i> ul >li >a{width: 120px:line-height: 36px:color: black:background-color: 
aliceblue;text-align: center:display: block:} 
.menu >ul >li > ul> li >a{border-top: 1px solid gray;} 
</style> 
人 > (a 
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图 6-20 二 级 菜单 列表 


其 中 对 于 CSS 文件 中 ,li:first-child 中 的 ftst-child 表示 对 第 一 个 子 对 象 的 引用 。menu >ul 
>li:first-child >a {border-left: none;} 表 示 显 示 ul 列表 下 第 一 个 子 对 象 “手机 数码 ” 左 侧 边框 
为 无 。 


【单元 小 结 】 
e ， 超 链接 伪 类 的 4 种 样式 : a:link、a:visited、a:hover 和 a:active 


e 通过 CSS 表单 设计 可 以 美化 文本 框 、 按 钮 、 下 拉 列 表 等 
。 用 横向 列表 的 float 浮动 定位 制作 导航 菜单 ， 然 后 通过 CSS 技术 来 美化 


【单元 自 测 】 


1. 超 链 接 a:hover 表示 ( ke 
A. 未 访问 的 链接 B. 已 访问 的 链接 
C. 鼠标 移动 到 链接 上 D. 选 定 的 链接 
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2. 表单 包括 两 个 部 分 ， 下 列 选项 中 属于 表单 组 成 部 分 的 是 ( 。 )。 
A. 表单 B. 表单 对 象 C. 表单 域 D. 以 上 都 是 
3. 下 面 能 正确 实现 label 标签 的 光标 定位 作用 的 是 (  )。 
A. <label>XX</label><input type="text" name=" 姓 名 " id="name" /> 
B. <label for="name">XX</label><input type="text" name=" 姓 名 " id="name" /> 
C. <label onblur="name">XX</label><input type="text" name=" 姓 名 " id="name" /> 
D. <label for=" 姓 名 ">XX</label><input type="text" name=" 姓 名 " id="name" /> 
. 要 使 列表 菜单 变 成 横向 的 ， 关 键 是 下 面 哪 名 代码? (。 ) 
A. #menu ul { list-style: none: margin: Opx: padding: Opx: } 
B. #menu ul li { float:left;} 
C. #menu ul lia { display:block: padding: Opx 8px; height: 26px: line-height: 
26px:; float:left:} 
D. #menu ul li a:hover { backeground:#333; color:#fff:} 
5. CSS Sprites 技术 是 指 ( 。”)。 
A. 把 多 张 图 片 文件 合并 
B. 把 背景 图 片 变 成 图 片 文件 
C. 把 多 张 背景 图 片 合并 成 一 张 图 片 文件 
D. 把 多 张 图 片 文 件 合并 成 一 张 背 景 图 片 


【上 机 实战 】 


上 机 目标 


。 掌握 伪 类 的 使 用 
e 使 用 CSS 表单 设计 美化 页 面 
e 在 网 页 上 使 用 导航 菜单 


上 机 练习 


练习 1: 超 链接 伪 类 的 使 用 


【问题 描述 】 

伪 类 常见 的 使 用 对 象 就 是 超 链 接 ， 超 链接 最 初 不 带 下 划 线 ， 如 图 6-21 所 示 ; 当 用 户 鼠 
标 指针 移动 到 超 链接 上 时 ， 会 显示 红色 的 下 划 线 ， 如 图 6-22 所 示 ; 当 用 户 单 击 时 ， 超 链接 
又 变 成 绿色 ， 并 且 变 得 没有 下 划 线 ， 如 图 6-23 所 示 。 








单元 六 ”应 用 CSS 设 置 链接 和 导航 菜单 


























WD Ets 
c |@ 127.00.18020/firstHTMLhtml6/ 上 机 .， 会 | 3 C Io 127.0.0.1:8020/firstHTML/html6/ 上 机 .… 女 | 
说 应 用 口上 网 S 般 省 百度 -下 省 百度 由 OA 系统 洪 应 用 中 上 网 S 航 党 百度 一 下 省 百度 国 OA 系统 » 











6-22 鼠标 指针 悬 停 时 显示 下 划 线 





> CG [© 127.00.18020/firstHTMU/html6/ 上 机 .， 女 | 3 
灌 应 用 站 上 了 8 有 党 百 朗 - 下 党 百度 四 OA 系统 » 
我 是 超 链接 ， 移 过 来 后 再 单 击 我 试 试看 


Www.163.com 


6-23 单 击 时 不 带 下 划 线 





【问题 分 析 】 

题目 很 简单 ， 只 要 分 清 超 链接 伪 类 的 4 种 样式 就 很 容易 实现 了 。 
e@ alink 为 访问 的 链接 

@ ai:visited 为 已 访问 的 链接 

@ a:hover 为 鼠标 移动 到 链接 上 

. 


aiactive 为 选 定 的 链接 


【参考 步骤 】 


<!DOCTYPE html> 

<head> 

<title> 无 标题 文档 </title> 

<meta charset="utf-8" /> 

<style type="text/css"> 

af ”人 * 设置 超 链接 不 带 下 划 线 ，text-decoration 表示 对 文本 修饰 */ 
color:blue; 

text-decoration:none; 


} 
aihover{ ”* 鼠标 在 超 链 接 上 基 停 时 ， 带 下 划 线 */ 
color:red; 
1 5 
} 
aactive{ 。”/* 活动 链接 时 ， 颜 色 为 绿色 ， 并 不 带 下 划 线 */ 
color:green: 
text-decoration:none; 


</style> 
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练习 2: 用 CSS 设计 导航 菜单 


【问题 描述 】 
通过 CSS 技术 实现 如 图 6-24 所 示 的 效果 ， 素 材 由 教员 提供 。 
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个 起 。 铬 Sd 。 产品 尖 讯 。 通告 


6-24 用 CSS 美 化 后 的 导航 菜单 


【问题 分 析 】 

@ 该 导航 菜单 效果 包括 两 个 部 分 : 上 层 子 菜单 和 下 层 子 菜单 。 

@ 不 用 动态 实现 切换 按钮 效果 ， 但 鼠标 移动 到 菜单 上 的 效果 要 显示 。 
@ ”素材 需要 用 到 CSS Sprites 技术 来 实现 背景 图 。 


【参考 步骤 】 

(1) 导航 分 为 一 级 导航 和 二 级 导航 ， 所 以 需要 在 nav 下 插入 nav_main 和 nav_son 两 个 
块 元 素 。 

<div id="nav"> 

<div id="nav 1"></div> 

<div id="nav 1"></div> 

<div class="nav_main"> 

<ul> 

<li><a hre 仁 "#"><span> 首 页 </span></a></li> 

<li><a hre 伍 "#" id="nav_current"><span> 企 业 新 闻 </span></a></li> 

<li><a hre 伍 "#"><span> 企 业 简介 </span></a></li> 

<li><a hre 仁 "#"><span> 产 品 展厅 </span></a></li> 

<li><a hre 伍 "#"><span> 企 业 历 史 </span></a></li> 

<li><a hre 伍 "#"><span> 招 商 加 盟 </span></a></li> 

<li><a hre 仁 "#"><span> 网 上 下 单 </span></a></li> 

<li><a hre 伍 "#"><span> 联 系 我 们 </span></a></li> 


<li><a hre 伍 "#"> 企 业 动 态 </a></li> 
<li><a hre 伍 "#"> 领 导 活动 </a></li> 
<li><a hre 合 "> 产品 资讯 </a></li> 
<li><a hre 舍 "#"> 通 知 公告 </a></1i> 
</ul> 

</div> 

</div> 
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(2) 设置 好 全 局 样式 。 


body { margin:0 auto: font-size:12px: font-family:Verdana; line-height:1.S:} 

,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;} 

ul { list-style:none;} 

a { color:#444; text-decoration-none;} 

(3) 设置 nav 的 高 度 及 背景 图 片 样式 。 

#nav { height:66px: background:-url(nav_ bg.gib 0 0 repeat-x: margin-bottom:8px:} 

(4) 设置 主 菜单 和 子 茶 单 样式 。 

.nav_main { height:36px: overflow:hidden:} 

.nav_main ul li { float:left; font-size:14px: font-weight:bold: margin:Spx Spx 0 Spx:} 

-nav_main ul li a { float:left; display:block; height:26px: line-height:26px: color-#fff: padding-left:20px;} 

-nav_main ul li a span { float:left; display:block: padding-right:20px;} 

.nav_main ul li ahover { background-url(nav_bg.gif) 0 -163px no-repeat:; color:#fEE} 

.nav_main ul li ahover span { background-url(nav_bg.gif) right -163px no-repeat; cursor:pointer;} 

.nav_main ul li a#nav_current { height:31px: line-height:31px: background:url(nav_bg.gif) 0 -132px 

no-repeat; color:#646464:} 

.nav_main ul li a#nav_current span { height:31px: background:url(nav_bg.gif) right -132px no-repeat;} 

.nav_son { height:30px:} 

.nav_son ul li { float:left; margin-top:4px:} 

.nav_son ul li a { display:block: width:78px: height:22px; line-height:22px: text-align:center; 

color:#6e6e6e:} 

.nav_son ul li ahover { background:url(nav_bg.gif) 0 -198px no-repeat:color:#FF0000;} 

注意 这 里 用 到 了 CSS Sprites 技术 ， 剪 切 图 片 的 坐标 要 精确 。 

(5) 最 后 一 步 就 是 实现 两 端的 圆 角 。 实 现 圆 角 的 方法 也 不 复杂 ， 只 需 再 增加 两 行 代 码 
和 两 个 样式 即 可 。 在 nav 下 的 nav_main 之 前 增加 如 下 两 行 代码 。 

<div id="nav_1"></div> 

<div id="nav_1"></div> 

然后 用 样式 表 定义 一 个 左 侧 的 圆 角 和 一 个 右 侧 的 圆 角 ，css 样式 如 下 。 

#nav_1 { float:left: height:66px: width:Spx: overflow:hidden: background:url(nav_bg.gif) 0 -66px no-repeat; 

margin-right:10px;} 

#nav_r { float:right:; height:66px; width:Spx: overflow:hidden; background:url(nav_bg.gif) -5px -66px 

no-repeat;} 

至 此 ， 整 个 导航 菜单 效果 就 出 来 了 。 


令 第 二 阶段 多 


练习 3: 实现 网 站 头 部 设计 


【问题 描述 】 
在 练习 2 的 基础 上 加 入 网 站 头 部 logo， 如 图 6-25 所 示 。 
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图 6-25 网 站 头 部 


【问题 分 析 】 
头 部 logo 分 为 两 部 分 ， 左 边 是 logo 图 标 ， 右 边 是 搜索 功能 。 只 需 实现 显示 效果 即 可 ， 
用 CSS+DIV 的 浮动 定位 来 实现 。 


【拓展 作业 】 


按照 上 机 练习 步 又 为 某 广告 公司 建立 网 站 , 取 名 为 MyCompany, 并 为 站 点 MyCompany 
设计 首页 (作业 相关 素材 如 下 )， 如 图 6-26 所 示 。 
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1 最 和 共立 化 : 殖 必 ， 县 大 名 和 市 本 了 ， 导 全 让 了 三 生 和 玉 。 
于 


6-26 ”建立 网 站 素材 





时 课程 目标 


区 掌握 各 种 不 同 框架 的 使 用 方法 
区 掌握 框架 中 各 种 标签 的 使 用 方法 
PP 了 解 embed 标签 的 用 法 
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电 尹 首 人 


王 架 有 利于 保持 整个 网 站 外 观 和 风格 的 一 致 性 ， 把 框架 应 用 到 页 面 布局 中 ， 能 够 大 大 
提升 我 们 网 站 设计 的 效率 。 本 单元 ， 我 们 就 重点 来 学 习 框架 的 基本 使 用 。 


7.1 框架 的 简 里 应 用 


在 浏览 网 页 时 ， 我 们 经 常会 遇 到 这 样 一 种 导航 结构 ， 就 是 位 于 左边 的 超级 链接 被 单 击 
以 后 ， 链 接 的 页 面 会 出 现在 页 面 右 边 ; 在 上 边 单 击 链接 以 后 ， 指 向 的 目标 页 面 出 现在 下 边 。 
要 做 出 这 样 的 效果 就 必须 使 用 框架 ， 框 架 的 使 用 大 大 提高 了 我 们 开发 网 页 的 效率 ， 降 低 了 
工作 量 。 本 单元 我 们 就 重点 来 介绍 如 何 使 用 框架 来 布局 网 页 。 


. 








7.1.1 框架 简介 


框架 将 每 个 浏览 器 窗口 分 为 多 个 独立 的 区 域 ， 每 个 区 域 (框架 ) 显 示 一 个 单独 的 可 滚动 
页 面 ， 每 个 框架 都 是 浏览 器 窗口 内 的 一 个 独立 窗口 。 典 型 的 框架 页 面 如 图 7-1 所 示 ， 这 是 
小 米 手 机 官网 首页 。 该 网 页 由 3 个 框架 组 成 ， 每 个 框架 单独 显示 一 张 网 页 。 顶 部 框架 用 于 
显示 横幅 广告 ， 对 应 于 页 面 top.html; 左 侧 框架 放置 商品 类 别 列表 ， 用 于 页 面 导航 ， 对 应 
于 页 面 left.html; 右 侧 窗 口 用 于 显示 产品 的 具体 信息 ， 对 应 于 页 面 main.html 。 A 方便 浏 
览 ， 当 浏览 者 单 击 左 侧 商 品 列 表 的 超 链接 时 ， 右 侧 窗 口 则 显示 相应 的 商品 信 ! 
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图 7-1 网 页 中 的 多 个 框架 页 面 


7.1.2 ”框架 的 用 法 


-个 网 页 可 以 有 一 个 或 多 个 框架 。 框 架 的 一 些 用 法 如 下 。 
(1) 在 网 页 的 一 个 固定 部 分 显示 Logo 或 前 。 
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(2) 左 侧 框架 显示 目录 ， 右 侧 框架 显示 内 容 ， 用 户 只 需要 单 击 左 侧 窗口 的 目录 ， 在 右 
侧 窗 口中 就 会 显示 相应 内 容 ， 如 网 上 在 线 学 习 教程 、 产 品 介绍 等 。 

(3) 多 视图 允许 设计 人 员 在 滚动 或 操纵 网 页 上 的 其 他 内 容 时 使 某 些 信息 静止 不 动 。 

遗憾 的 是 ， 不 是 所 有 的 浏览 器 都 支持 框架 ， 并 且 如 果 浏览 器 窗口 被 划分 为 过 多 的 子 窗 
口 ， 还 会 影响 网 页 的 整体 美观 ， 所 以 ， 有 时 为 了 方便 我 们 也 可 以 使 用 表格 来 布局 。 


7.1.3 垂直 框架 


框架 按照 方向 分 为 垂直 框架 、 水 平 框架 。 通 过 这 种 布局 方式 ， 使 得 每 个 页 面 都 更 加 清 
晰 、 有 层次 感 。 我 们 可 以 使 用 框架 结构 标签 (<frameset>) 来 将 窗口 分 割 为 框架 , 每 个 fameset 
定义 了 一 系列 行 或 列 ，rows 定 义 了 每 行 在 整个 窗口 中 所 占 面积 ，columns 定 义 了 每 列 在 整个 
窗口 中 所 占 面 积 。 框 架 标签 (<frame>) 定 义 了 放 在 每 个 框架 中 的 HTML 文件 ，src 属 性 定义 了 
HTMI 文 件 的 访问 路 径 。 下 面 我 们 把 整个 窗口 垂直 分 割 为 三 部 分 ， 包 含 3 个 HTML 文件 ， 分 
别 为 fame_1.html、frame_2.html、frame 3.html， 其 代码 如 下 ， 效 果 显 示 如 图 7-2 所 示 。 

index.html 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 垂 直 框架 </title> 
<frameset cols="25%,40%,35%"> 
<frame src="frame_1.html" /> 
<frame src="frame 2.html" /> 
<frame src="frame 3.html" /> 
</frameset> 
</head> 
</html> 


frame_1.html 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 左 侧 框架 </title> 
<style type="text/css"> 
body{background: cornflowerblue;} 
hl {padding: 50% 50%;} 
</style> 
</head> 


<h1> 左 侧 框架 </h1> 


</body> 
</html> 


frame 2.html 代码 如 下 : 


<html> 
<head> 
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<meta charset="UTF-8"> 
<title> 主 体 框架 </title> 
<style type="text/css"> 
body{background: darkslateblue:} 
hl {padding: 50% 50%;} 
</style> 
</head> 


<h1> 主 体 框架 </h1> 


</body> 
</html> 


frame_3.html 代码 如 下 : 


<html> © [O1001 
<meta charset="UTF-8"> 
<title> 右 侧 框 架 </title> 
<style type="text/css"> 
body{background: dodgerblue;} 
hl {padding: 50% 50%;} 
</style> 
</head> 





<h1> 右 侧 框架 </h1> 
</body> 
</html> 


前 / 注 高 | 
| 最 好 不 要 将 <body> 标 签 和 <frameset> 标 签 同时 使 用 ， 但 如 果 <frameset> 标 签 中 包含 | 
<nofame> 标 签 ， 并 且 该 标签 中 包含 一 段 文本 ,那么 就 必须 将 该 段 文 本 包含 在 body 标签 中 。 ; 





7-2 ”垂直 框架 


| 
\ 


7.1.4 ”水 平 框架 


大 家 上 网 浏览 网 页 时 ， 一 般 都 是 从 上 到 下 这 样 一 个 顺序 来 浏览 ， 水 平 框架 在 使 用 过 程 
中 更 加 广泛 。 同 样 我 们 仍然 把 一 个 窗口 从 上 到 下 分 制 为 三 部 分 也 同样 包含 3 个 HTML 文 
件 ， 分 别 是 frame_1.html、frame_ 2.html、frame_ 3.html， 代 码 如 下 。 

index.html 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 水 平 框架 </title> 
<frameset rows="25%,45%,30%"> 
<frame src="frame 1.html" /> 
<frame src="frame 2.html" /> 
<frame src="frame 3.html" /> 
</frameset> 
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</head> 
</html> 


frame_1.html 代码 如 下 : 


<html> 
<head> 


<meta charset="UTF-8"> 
<title> 左 侧 框 架 </title> 
<style type="text/css"> 
body{background: cornflowerblue:;} 
</style> DD xP x 
</head> © |© 127.0.0.13020/fir 


<body> 器 ”中 上 网 导 的 
<h1> 顶 部 框架 </h1> 
</body> 


</html> 
frame 2.html 和 frame_3.html 代码 同 
a 


7.1.5 混合 框架 








图 7-3 ”水平 框 架 


在 实际 的 设计 过 程 中 ， 不 会 都 是 一 些 自 上 而 下 或 自 左 至 右 的 那 种 等 分 隔 框 架 ， 通 常 我 
们 会 把 水 平 框架 以 及 垂直 框架 混合 使 用 ， 这 也 就 是 混合 框架 。 一 般 网 页 设计 过 程 中 ， 混 合 
框架 的 布局 使 用 非常 多 。 首 先 我 们 将 窗口 水 平分 割 为 两 个 部 分 ， 上 面 一 部 分 我 们 嵌入 
frame_1.html 文档 ; 然后 我 们 再 把 下 面 一 部 分 垂直 分 割 为 两 个 部 分 ， 分 别 包含 frame_2.html 
和 frame 3 .html 文档 ， 代 码 如 下 。 

index.html 代码 如 下 : 

<html> 

<head> 

<meta charset="UTF-8"> D et 

<title> 混 合 框架 </title> 

<frameset rows="30%,70%"> 

<frame src="frame_ 1.html" /> 


<frameset cols="40%,60%"> 
<frame src="frame 2.html" /> 


<frame src="frame 3.html" /> 

</frameset> 

</frameset> 

</head> 

</html> 

frame 2.html 和 frame 3.html 代码 同 
frame_1 代码 ， 其 效果 如 图 7-4 所 示 。 


图 7-4 温 合 框架 
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7.2 框架 属性 设置 


7.2.1 边框 颜色 设置 


在 使 用 框架 过 程 中 ， 需 要 对 每 个 部 分 有 一 个 显著 的 区 别 ， 使 用 颜色 来 区 分 ， 无 疑 会 非 
常 节省 时 间 和 精力 ， 我 们 使 用 bordercolor 来 设置 边框 的 颜色 。 下 面 我 们 来 看 看 边框 颜色 属 
性 的 使 用 ， 其 代码 如 下 。 

index.html 代码 如 下 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 混 合 框架 边框 颜色 </title> 

<frameset rows="30%,70%" bordercolor="red"> 
<frame src="frame 1.html" /> 

<frameset cols="40%,60%" bordercolor="red"> 
<frame src="frame 2.html" /> 

<frame src="frame 3.html" /> 

</frameset> 

</frameset> 

</head> 

</html> 


其 效果 如 图 7-5 所 示 。 





7.2.2 ”框架 上 下 边 距 和 左右 边 距 


marginheight 属性 规定 框架 内 容 与 框架 上 方 
和 下 方 之 间 的 高 度 ， 使 用 像素 作为 计算 单位 ; 
marginwidth 属性 规定 边框 内 容 与 边框 的 左 侧 和 
右 侧 的 高 度 ， 也 是 使 用 像素 作为 计算 单位 。 其 代 
码 如 下 。 

index.html 代码 如 下 。 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 混 合 框架 </title> 

<frameset rows="30%,70%" 

<frame src="frame_1.html" 

<frameset cols="40%,60%" 
marginwidth="100px" marginheight="100px"/> 
marginwidth="50px" marginheight="50px"/> 


图 7-5 边框 颜色 设置 
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</head> 
</html> 


其 效果 如 图 7-6 所 示 。 





江上 RN 入 EE 下 务 E2 ouER jnsz3 





图 7-6 框架 上 下 左右 边 距 设置 


7.2.3 ”框架 间 空 白 区 域 设 置 


当 我 们 在 设计 框架 时 ， 如 果 设 置 框架 的 边框 border="0" 时 ， 大 家 会 发 现 两 个 框架 看 起 
来 就 像 一 个 框架 一 样 。 就 这 种 效果 而 言 ， 我 们 使 用 框架 间 空 白 区 域 famespacing 来 进行 设 
置 ， 也 可 以 很 好 地 进行 区 分 ，framespacing 表示 框架 与 框架 间 保 留 的 空白 区 域 距离 ， 其 代 
码 如 下 。 

index.html 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 混 合 框架 中 空白 区 域 设置 </title> 
<frameset rows="30%,70%" bordercolor="red" framespacing="20px"> 
<frame src="frame_1.html" marginwidth="300px" marginheight="30px" /> 
<frameset cols="40%,60%" bordercolor= 
"red" framespacing="40px"> © OTE wide eee tor 
<frame src="frame 2.html" marginwidth= TPAD C 
"100px" marginheight="100px" /> pee 
<frame src="frame_3.html" marginwidth= 
"S50px" marginheight="50px" /> 





其 效果 如 图 7-7 所 示 。 


ET oo ~ 


框架 间 空 白 区 域 设 置 
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7.2.4 框架 滚动 条 显示 


在 框架 中 ， 滚 动 条 的 出 现 给 页 面 呈 现 了 一 个 很 好 的 布局 方式 ， 因 为 窗口 大 小 的 因素 ， 
如 果 我 们 的 内 容 很 大 ， 就 可 能 会 出 现 内 容 的 丢失 情况 ， 滚 动 条 可 以 包含 更 多 的 内 容 ， 我 们 
可 以 使 用 scrolling 属性 来 定义 在 框架 中 是 否 显示 滚动 条 ， 其 语法 格式 如 下 。 


<frame scrolling="value"> 
scrolling 的 值 有 3 种 ， 属 性 如 表 7-1 所 示 。 
表 7-1 scrolling 属性 值 表 


在 需要 的 时 候 显示 滚动 条 (默认 值 ) 
始终 显示 滚动 条 (即使 不 需要 显示 ， 也 会 显示 滚动 条 ) 
从 来 不 显示 滚动 条 (即使 需要 显示 ， 也 不 会 显示 ) 


其 代码 如 下 。 
index.html 代码 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 混 合 框架 中 滚动 条 设置 </title> 
<frameset rows="30%,70%" > 

<frameset es . El Windows Internet x. [SE] 
<frame src="frame 2.html" scrolling="yes"/> OO [ern -[B[9[x] 夯 二 -5 
<frame srcr frame 3.html" scrolling="auto"/> 资 履 项 交 | 记 站 ] 定义 凶 搂 

/frameset> Bern 

</frameset> 
</head> 
</html> 


其 效果 如 图 7-8 所 示 。 








 @ internet | 保护 模式: 本 用 而 ”| 政 1009% ~ 


图 7-8 框架 滚动 条 设置 


7.3 框架 的 高 级 应 用 








7.3.1 导航 框架 


水 平 框架 和 垂直 框架 都 是 最 基本 的 网 页 布局 形式 ， 有 时 候 当 我 们 单 击 左 侧 导 航 栏 时 ， 
在 它 的 右 侧 部 分 会 显示 出 详细 的 信息 介绍 ， 这 就 是 导航 框架 ， 导 航 框架 的 使 用 更 加 方便 我 
们 的 阅读 ， 其 代码 如 下 。 
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index.html 代码 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 导 航 框架 </title> 
<frameset cols=" 150, es 


container_list.html 导航 列表 代码 : 


<html> 
<head> 

<meta charset="UTF-8"> 
<title> 菜 单 链接 列表 </title> 
</head> 


<a href="frame_1.html" target="frame list">frame_1 框架 </a><br /> 
<a href="frame 2.html" target="frame list">frame 2 框架 </a><br /> 
<a href="frame 3.html" target="frame list">frame 3 框架 </a><br /> 
</body> 
</html> 
其 效果 如 图 7-9 所 示 。 
我 们 可 以 看 到 ， 将 整个 窗口 分 割 为 两 个 部 © | © 12700.13020/frstHTMUhtmD/ 导 肪 笃 . > 
分 ， 一 个 部 分 包含 导航 链接 ， 另 一 个 部 分 用 来 漠 应 周 口上 RS 尖 并- 下 党 百 站 OA 系统 


展示 这 些 链接 的 详细 内 容 。 把 链接 展示 到 指定 。 | fn 和 
的 地 方 ， 我 们 需要 使 用 target 属性 ， 把 链接 部 

分 的 target 属性 值 和 frame 标签 中 的 name 属性 

值 设 为 一 致 ， 这 样 ， 导 航 链接 才能 准确 地 显示 

到 右 侧 部 分 。 


732 内 联 框架 图 7-9 导航 框架 


由 于 <frameset> 标 签 和 <frame> 标 签 对 网 页 可 用 性 的 负面 影响 ，HITMILS 中 没有 支持 这 
两 个 标签 ， 使 用 内 联 框架 (< 过 ame>)， 也 可 以 实现 这 种 布局 。 在 后 面 的 网 页 设计 中 ， 建 议 使 
用 过 ame 标签 来 设计 布局 方式 ， 通 过 使 用 这 种 类 型 的 框架 ， 可 以 在 同一 个 页 面 中 显示 多 个 
页 面 ， 每 个 HTML 文件 都 是 一 个 独立 于 其 他 的 框架 。 

其 语法 格式 为 : 

<ifiame sre="URI" width="xx" height-="xx" frameborder="xx"></iframe> 

其 中 src 属性 值 表示 指向 隔离 页 面 的 位 置 ，width 用 于 定义 过 ame 框架 的 宽度 ，height 
用 于 定义 过 ame 框架 的 高 度 ， 宽 度 和 高 度 的 值 可 以 用 像素 来 定义 ， 也 可 以 通过 百分比 来 设 
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定 ( 比 如 "30%"); frameborder 属性 表示 是 否 在 fame 框架 周围 显示 边框 ， 当 frameborder 的 
值 为 0 时 表示 去 除 边 框 ， 当 值 为 1 时 则 表示 显示 边框 。 
代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 这 ame 作为 链接 目标 </title> 
</head> 
<body> 
<iframe src="iframe_3.html" frameborder="1" name="pku" height="800px" width="800px"></iframe> 
<br/> 
<a hre 全 "http;//www.pku.edu.cn"” target="pku"> 中 国 育才 摇篮 北京 大 学 </a> 
</body> 
</html> 


显示 效果 如 图 7-10 所 示 。 
单 击 页 面 左下 方 "中 国 育才 摇篮 北京 大 学 "， 显 示 效 果 如 图 7-11 所 示 。 
EE ee 


了 > COl127001 TMUhtm7/ 使 用 framefy 为 地下 号 祭 hL- 女 | 于 
措 6 用 门 LS 和 当归 - 下 党 已 朗 同 CAR 由 java 习 








中 国 至 才 氛 氏 北京 大 学 





图 7-10 内 联 框 架 图 7-11 链接 内 容 显 示 到 指定 内 联 框架 中 


本 例 中 ， 在 a 标签 下 使 用 属性 target 表示 链接 所 要 显示 的 位 置 ， 当 所 ame 内 联 框 架 中 
属性 name 的 值 和 a 标签 下 target 属性 值 相 同时 ， 则 a 标签 所 链接 的 内 容 就 会 显示 在 这 个 
这 ame 内 联 框架 中 。 


7.3.3 ”多 层 骨 套 内 联 


网 页 中 包含 一 个 主 网 页 ， 主 网 页 中 又 嵌 套 另 一 个 网 页 ， 这 样 一 层 一 层 嵌 套 下 去 形成 多 
层 嵌 套 内 联 ， 一 般 很 少 使 用 这 类 嵌 套 ， 大 家 后 面 会 了 解 更 多 的 布局 方式 ， 这 里 就 简单 介绍 
一 下 ， 一 共 包含 4 个 HTML 文件 ， 分 别 是 index.html、 达 ame 1.html、 达 ame 2.html、 
这 ame 3.html， 其 代码 如 下 ， 效 果 显示 如 图 7-12 所 示 。 











单元 七 ”HTML 中 框架 的 应 用 


index.html 代码 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 内 联 框架 </title> 

</head> 
主 界面 
<a hre 全 "http://www.taobao.com" target="iframe in > 淘宝 商城 ,应 有 尽 有 </a> 
<br/> 
<iframe src="iframe 1.html" name="ifiame in frameborder="1" width="800px" height="800px"> 
</iftame> 

</html> 


fame_1.html 代码 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 内 联 框架 _1</title> 

</head> 

<body bgcolor="gray"> 
内 联 框架 1 
<a hre 伍 "http://www.baidu.com" target="baidu"> 百 度 一 下 ， 便 知 天 下 </a> 
<br/> 


<iframe src="iframe 2.html" frameborder="0" width="600px" height="600px" name="baidu"> 


</iframe> 
Tbody> 
</html> 


iframe_2.html 代码 : 


<html> 

<head> 

<meta charset="UTF-8"> 

<title> 内 联 框架 2</title> 

</head> 

<body bgcolor="#5F9EAO"> 
内 联 框架 2 
<a hre 伍 "http://www.jd.com" target="jd"> 京 东 购 物 ， 假 货 没 有 </a><br /> 
<iframe src="iframe 3.html"” frameborder="0" width=" x" height="400px" name="jd"> 
</ifame> 

</body> 

</html> 


jframe 3.html 代码 : 


<html> 
<head> 
<meta charset="UTF-8"> 
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内 联 框架 3 
<a href="http//www.qq.com"” target=" blank"> 腾 讯 科技 ， 娱 乐 首 选 </a> 


3 GC [© 1270.0.L8020/frstHTMUhtmI7/ 内 际 三 二 html?_h.， 会 | 3 
洪 由 用 站 上 网 S96 从 百度 -下 党 百 朗 同 OA 过 由 javay 习 
主 界面 淘 主 席 域 ,出 有 评 有 


图 7-12 多 层 帐 套 





7.3.4 ”embed 标签 


<embed> 标 签 是 HTML5 中 新 增 的 标签 ， 用 于 定义 嵌入 的 内 容 ， 可 以 在 页 面 中 嵌入 任 
何 类 型 的 文档 。 一 般 常 用 该 标签 插入 MP3 音乐 、 电 影 、swf 动画 等 各 种 多 媒体 格式 的 文件 ， 
同时 ，embed 标签 也 可 以 嵌入 HTML 文件 ， 只 需要 我 们 把 类 型 定义 好 即 可 。 这 里 我 们 使 用 
embed 标签 来 代 蔡 过 ame 标签 ， 同 样 是 多 级 嵌 套 ， 在 此 只 改变 index.html 文件 ， 其 他 文件 
不 做 改动 ， 代 码 如 下 。 

index.html 代码 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>embed 标签 使 用 </title> 
</head> 
<body> 
<a hre 全 "http://www.taobao.comn target="embed"> 淘 宝 购物 ， 应 有 尽 有 </a> 
<br> 
<embed type="text/html" name="embed" src="iframe 1.html" width="600px" height="600px"> 
</embed> 
</body> 
</html> 


其 效果 显示 如 图 7-13 所 示 。 
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图 7-13 ”embed 多 层 嵌 套 


将 图 7-13 和 图 7-12 作对 比 ， 大 家 会 发 现 ， 效 果 图 完全 一 模 一 样 ， 并 且 embed 标签 功 
能 更 加 强大 。 


【单元 小 结 】 


。 框架 将 Web 浏览 器 窗口 分 割 为 多 个 独立 的 区 域 ， 每 个 区 域 显示 一 个 可 独立 滚动 的 
页 面 。 

。 框架 根据 布局 方式 不 同 ， 分 为 垂直 框架 、 水 平 框架 、 导 航 框架 、 内 联 框架 。 

。 embed 标签 功能 强大 ， 可 以 插入 各 种 多 媒体 文件 ， 还 可 以 顽 套 HIML 文件 。 


【单元 自 测 】 


1. 定义 上 下 分 割 的 框架 的 大 小 的 是 (。”)。 
A. rows B. cols 
C. widths D. heights 
2. 下 面 关于 这 ame 标记 的 使 用 格式 的 说 法 错误 的 是 (。”)。 
A. 源 参数 设置 文件 的 路 径 ， 既 可 以 是 HTML 文件 ， 也 可 以 是 文本 等 其 他 文件 
B. 宽度 、 高 度 参数 设置 内 联 框架 的 宽 与 高 
C. 滚动 参数 设置 为 当 源 的 指定 HTML 文件 在 指定 的 区 域 不 能 完全 显示 时 ， 当 设置 
为 否 时 ， 则 不 会 出 现 滚动 条 ， 当 设置 为 自动 ， 则 会 自动 出 现 滚动 条 ， 当 设置 为 
是 时 ， 则 显示 滚动 条 
D. 边框 宽度 参数 设置 内 联 框架 的 边框 宽度 ， 为 了 与 相 邻 内 容 相 融合 ， 设 置 值 越 大 
越 好 
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3. 在 HTML 中 ，<frame noresize> 的 具体 含义 是 下 列 哪 一 项 ? ( ) 
A. 个 别 框架 名 称 B. 定义 个 别 框架 
C. 不 可 改变 大 小 D. 无 深 动 条 出 现 

4. 如 果 把 一 个 链接 文件 准确 定位 到 一 个 框架 中 ， 需 要 使 用 哪些 属性 ? ( 
A. frameborder B. target 


C. name D. scrolling 


【上 机 实战 】 


上 机 目标 


e 使 用 框架 


上 机 练习 


练习 : 框架 的 使 用 
【问题 描述 】 


) 


练习 制作 框架 网 页 frame.html， 效 果 如 图 7-14 所 示 。 单 击 左边 窗口 中 的 链接 ， 将 在 右 
边 窗口 中 显示 链接 内 容 。 左边 窗口 中 的 链接 依次 链接 到 上 几 次 阶段 练习 的 网 页 : index.html、 


success.html、 contact.html 和 register.html。 





Qiol2a0: wen ernie Wom?_ Nbt™ 15274981 77004 
江 em D Hn AEm jm 
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【问题 分 析 】 
根据 本 章 对 框架 的 学 习 创建 一 个 框架 集 网 页 
前 / 江 童 一 一 一 一 


| Pes 选择 文件 ”| “保育 全 部 ”命令 将 框架 到 个 保 让 假设 整体 框架 | 
. 为 frame.html， 顶 部 框架 为 top.html， 左 边框 架 为 left.html， 右 边框 架 为 righthtml。 





在 顶部 框架 和 左边 框架 中 依次 加 入 如 图 7-14 所 示 的 文本 内 容 。 
分 别 为 左边 框架 的 导航 文字 加 上 链接 ， 并 分 别 链接 到 index.html、success.html、 
contacthtml 和 registerhtml。 注 意 其 链接 目标 的 设置 。 


【拓展 作业 】 


和 人 个 页 面 pt html， 并 将 其 编辑 成 如 图 7-15 人 
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2. 通过 框架 创建 第 二 个 页 面 creative.html， 并 在 此 页 面 内 添加 注册 表单 ， 如 图 7-16 
所 示 。 

3. 通过 框架 创建 第 三 个 页 面 creative.html， 并 添加 相应 文本 信息 ， 如 图 7-17 所 示 。 

4. 分 别 给 网 站 内 每 个 页 面 对 应 的 导航 栏 添加 链接 ， 使 每 个 页 面 之 间 能 相互 跳 转 。 链 接 
如 下 : “关于 品 拓 ” 链 接 到 “company.html”，“ 成 功 案例 ”链接 到 “producthtml”，“ 行 
销 传播 ”链接 到 “creative.html”，“ 联 系 我 们 ”链接 到 “contacthtml”，“HOME ”链接 
到 “indexhtml”。 
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应 用 DIV+CSS 设计 
商业 网 站 (PC 器 ) 


© 课程 目标 

PP 了 解 网 站 开发 流程 

Pp 掌握 网 站 开发 的 实际 方法 

P 掌握 如 何 使 用 DIV 和 样式 表 布 局 
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他 户 币 人 

在 前 面 的 课程 中 ， 我 们 系统 地 学 习 了 如 何 制作 网 页 ， 这 些 知识 足以 使 我 们 制作 出 一 个 
出 色 的、 漂亮 的 、 绝 对 有 吸引 力 的 网 页 。 

那么 ， 请 思考 这 样 一 个 问题 : 我 们 接 到 客户 的 一 个 订单 ， 需 要 制作 一 个 购物 网 站 ， 使 
用 户 能 够 方便 地 通过 互联 网 进行 购物 。 当 然 ， 就 目前 我 们 所 学 的 知识 ， 对 于 网 站 中 与 用 户 
交互 需要 用 程序 实现 的 这 一 部 分 我 们 现在 还 无 法 实现 ， 但 网 页 的 样式 、 布 局 等 ， 以 我 们 现 
在 的 知识 是 完全 可 以 实现 的 。 那 么 ， 我 们 该 如 何 实现 这 个 购物 网 站 ? 

我 想 ， 大 家 更 多 的 是 觉得 无 从 下 手 。 是 不 是 已 经 想到 了 很 多 ， 但 是 不 知道 怎么 才能 将 
这 些 想到 的 内 容 组 织 并 结合 在 一 起 ， 形 成 一 个 可 供 人 使 用 的 购物 系统 ? 没有 关系 ， 接 下 来 
将 给 大 家 讲解 ， 如 何 将 我 们 想到 的 变 成 实际 能 够 实现 的 商业 网 站 。 


8.1 商业 网 站 开发 流程 


8.1.1 结构 分 析 


首先 拿 到 一 个 商业 网 站 ， 我 们 需要 对 页 面 结构 进行 分 析 。 根 据 效 果 图 ， 分 析 页 面 ， 
将 页 面 分 为 几 个 版 块 ， 该 怎么 布局 更 合理 。 图 8-1 是 一 个 商业 网 站 的 主页 ， 由 于 版 面 的 
原因 ， 在 此 ， 我 们 只 呈现 大 部 分 内 容 ， 另 有 主体 部 分 中 的 “优选 推荐 ”和 “下 装 推荐 ” 
这 两 部 分 尚未 展示 ,但 在 后 面 我 们 会 把 这 两 部 分 也 做 出 来 ， 呈 现 给 大 家 。 这 个 网 站 主页 
简洁 美观 ， 相 信 大 家 也 很 想 做 出 这 么 漂亮 的 商业 网 站 ， 能 够 利于 大 家 的 生活 或 者 工作 ， 
快速 提升 人 们 的 生活 质量 。 这 个 商业 网 站 的 效果 图 及 在 网 页 中 显示 的 样式 如 图 8-1 和 图 
8-2 所 示 。 

从 图 8-1 中 可 以 看 出 整个 页 面 分 为 头 部 区 域 、 主 体 部 分 和 底部 三 大 部 分 ， 其 中 头 部 又 
分 为 项 部 信息 注册 部 分 、 搜 索 区 域 、 导 航 栏 三 个 部 分 , 主体 部 分 分 为 轮 播 图 (后 面 会 学 习 到 )、 
广告 和 内 容 三 部 分 ， 其 中 内 容 部 分 包含 秒杀 、 优 客 工 恤 、 新 品 推荐 、 优 选 推荐 、 下 装 推荐 、 
更 多 推荐 以 及 底部 共 七 个 部 分 ， 整 个 页 面 居 中 显示 。 对 商业 网 站 的 整体 布局 方式 了 解 清 楚 
了 ， 那 么 接 下 来 整个 框架 就 非常 容易 搭建 了 ， 整 体 框架 如 图 8-3 所 示 。 











单元 八 _ 应 用 DIV+CSS 设 计 商 业 网 站 (PC 端 ) 











BE So= he 9 ers 四 
图 8-1 网 站 部 分 效果 图 
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图 8-2 网 页 中 的 显示 样式 





顶部 信息 注册 dlass="headtoparea" 
搜索 栏 “dlass="vanclsearch" 
导航 栏 dass="navist" 

轮 播 图 class="vanclimg” 
广告 class="getguanggao” 
秒杀 class="miaosha_contoiner” 
T 恤 class="miaosha_contoiner” 
新 品 推荐 class="miaosha_contoiner” 
优选 推荐 class="te* 

下 装 推 荐 dass=%te* 

更 多 推荐 cass=Yc” 
底部 class="vanclFoot” 





图 8-3 页 面 整 体 框架 


8.1.2 搭建 框架 


首先 在 工具 里 新 建 一 个 html 文件 ， 文 件 命名 为 index.html， 并 把 <title> 标 签 设 为 主页 。 
强调 一 点 : 在 写 网 页 的 过 程 中 ， 大 家 喜欢 把 第 一 行 代码 删除 掉 ， 认 为 没 用 ， 其 实 这 句 话 的 
作用 很 大 ， 它 声明 了 文档 的 解析 类 型 ， 避 免 浏 览 器 出 现 怪异 模式 ， 如 果 删 除 可 能 会 在 不 同 
的 浏览 器 中 显示 不 同 的 样式 。 

<head> 

<meta charset="utf-8" /> 
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<title> 主 页 </title> 


</html> 


然后 就 是 依次 插入 标签 。 在 此 处 , 我 们 使 用 HTML 中 的 新 标签 header、section、footer 
分 别 代 表 头 部 、 主 体 、 尾 部 三 个 部 分 ， 这 三 个 标签 的 功能 和 div 功能 是 一 样 的， 在 此 处 这 
样 设置 是 为 了 方便 为 HTML 代码 设置 样式 ， 代 码 如 下 。 


<header class="vanclhead"> 
<div class="headtoparea"> 此 处 显示 class "headtoparea" 的 内 容 </div> 
<div class="vanclsearch"> 此 处 显示 class "vanclsearch" 的 内 容 </div> 
<div class="navlist"> 此 处 显示 class "navlist" 的 内 容 </div> 
</header> 
<section class="content"> 
<div class="vanclimg"> 此 处 显示 class "vanclimg" 的 内 容 </div> 
<div class="getguanggao"> 此 处 显示 class "getguanggao" 的 内 容 </div> 
<div class="miaosha"> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="te"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="vanclFoot"> 此 处 显示 class "vanclFoot" 的 内 容 </div> 
</div> 
</section> 
<footer><div class="footerArea"> 此 处 显示 class "footerArea" 的 内 容 </div></footer> 


从 前 面 的 效果 图 分 析 得 知 ， 整 个 网 页 是 居中 于 浏览 器 显示 的 ， 按 照 这 样 的 写法 需要 把 
header、content、footer 都 设置 宽度 并 居中 。 这 样 做 起 来 很 麻烦 ， 为 了 方便 ， 在 这 些 标签 外 
增加 一 个 父 标签 ， 设 置 这 个 父 标签 的 宽度 并 居中 后 ， 所 有 的 标签 就 都 居中 了 。 增 加 后 的 代 
码 如 下 。 

<div id="container"> 

<div id="header"> 此 处 显示 id "header" 的 内 容 </div> 

<header class="vanclhead"> 

<div class="headtoparea"> 此 处 显示 class "headtoparea" 的 内 容 </div> 
<div class="vanclsearch"> 此 处 显示 class "vanclsearch" 的 内 容 </div> 
<div class="navlist"> 此 处 显示 class "navlist" 的 内 容 </div> 
</header> 
<section class="content"> 
<div class="vanclimg"> 此 处 显示 class "vanclimg" 的 内 容 </div> 
<div class="getguanggao"> 此 处 显示 class "getguanggao" 的 内 容 </div> 
<div class="miaosha"> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="te"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="te"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="vanclFoot"> 此 处 显示 class "vanclFoot" 的 内 容 </div> 
</div> 
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</section> 

<footer><div class="footerArea"> 此 处 显示 class "footerArea" 的 内 容 </div></footer> 

</div> 

HTML 框架 代码 写 完 后 ， 然 后 就 需要 设置 CSS 的 样式 表 。 先 测量 效果 图 的 整体 宽度 ， 
然后 将 container 也 设置 为 这 个 宽度 并 居中 。 可 以 通过 多 种 方法 测量 效果 图 的 整体 宽度 : 可 
以 直接 查看 图 片 尺寸; 如 果 需 测量 其 中 某 一 块 的 宽度 , 可 以 使 用 测量 软件 ,如 使 用 Photoshop 
测量 。 最 简单 的 方法 就 是 使 用 QQ 软件 快捷 键 Ctrlt+AltrA 这 种 截图 工具 来 测量 ， 选 中 要 测 
量 的 部 分 后 ， 大 家 就 可 以 很 直观 地 看 到 选中 区 域 的 宽度 和 高 度 了 。 

测量 后 得 知 : 整体 宽度 为 1200px， 把 这 个 最 重要 的 宽度 测量 后 ， 就 可 以 通过 写 CSS 
代码 文件 进行 布局 了 。 一 般 大 家 做 商业 网 站 的 时 候 ， 可 能 会 涉及 多 个 网 页 ， 这 些 网 站 的 布 
局 方式 很 多 地 方 可 能 会 有 共同 性 。 为 了 增加 代码 的 复 用 性 ， 减 少 工作 量 ， 我 们 可 以 把 CSS 
代码 单独 写 在 一 个 文件 中 ， 当 其 他 页 面 也 需要 这 种 样式 来 布局 时 ， 我 们 就 可 以 把 这 个 CSS 
文件 直接 通过 外 部 样式 表 的 方式 引用 到 HTML 文件 中 。 下 面 我 们 就 单独 在 CSS 文件 夹 下 
新 建 一 个 CSS 文件 ， 在 这 里 命名 为 layout.css 即 可 。 

保存 后 先 设置 全 局 样式 ， 然 后 再 写 每 一 块 单独 的 样式 ， 全 局 样式 代码 如 下 。 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,th,td,html,a,ul,li,ol, 

section,header,footer,nav {margin: 0;padding: 0:} 

a{text-decoration: none:color: #333;} 


ul li,ol li {list-style-type: none:} 
input {font-family: inherit:font-size: inherit:font-weight: inherit;} 


html,body {width: 100%:height: 100%:font-size: 12px:font-family: "宋体 ":color: #333; 
background: #fff:display: block:} 

‘fr {float: right;} 

-fl {float: left:} 

.pr {position: relative:} 

.pa {position: absolute:} 

.Clear {clear: both:} 


全 局 样式 定义 完 后 ， 再 定义 各 版 块 的 样式 ， 先 设置 .container 的 样式 ， 如 下 所 示 。 

.containter {width: 10096:height: 10096:} 

预览 ndex.html 页 面 ， 发 现 并 没有 改变 。 这 是 为 什么 呢 ? 因为 刚才 定义 的 样式 表 没 有 
与 html 文件 关联 ， 所 以 设置 的 样式 当然 不 能 对 它 生 效 了 。 我 们 前 边 讲 过 将 CSS 应 用 于 网 
页 的 几 种 方式 ， 这 里 ， 为 了 方便 使 用 ， 我 们 使 用 外 部 样式 ， 只 需要 在 HIML 头 部 添加 代码 

<link rel="stylesheet" type="text/css" href=css/index.css"> 
即 可 。 保 存 ， 预 览 一 下 ， 发 现 index.html 文件 的 样式 发 生 了 变化 ， 这 时 ， 就 说 明 样式 和 文 
件 关联 好 了 。 通 过 这 种 引用 方式 ， 可 以 增加 CSS 样式 表 的 复 用 性 ， 其 他 页 面 也 需要 这 种 样 
式 的 话 ， 也 可 以 直接 引用 。 下 面 设置 一 下 每 个 大 板块 的 样式 ， 设 置 了 宽度 和 高 度 ， 代 码 
如 下 。 


/*body*/ 
#container { width: 100%: height: 100%} 


/*header*/ 
.vanclhead {width: 100%:height: auto:} 
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/*content*/ 
.content {width: 1200px:margin: auto:} 


/*footer*/ 
.footBottom {width: 100%:height: auto:margin: Opx auto:border-top: 1px solid #3e3a39:} 
.subFooter {width: 980px:margin: Opx auto 25px;text-align: center:} 


在 设计 网 页 过 程 中 ， 通 常会 涉及 浮动 的 问题 ， 为 了 使 整个 页 面 不 出 现 问 题 ， 建 议 在 
header、content、footer 之 间 增 加 如 下 一 行 代码 并 设置 css 样式 如 下 , 它 的 作用 是 清除 浮动 。 

<div class="clearfloat"></div> 

.clearfloat {clear:both:height:0;font-size: 1px:line-height: Opx;} 

<html> 


<head> 

<meta charser="utf-8"/> 

<title> 主 页 </title> 

<link href="css/index.css" rel="stylesheet" type="text/css" /> 


<div class="headtoparea"> 此 处 显示 class "headtoparea" 的 内 容 </div> 
<div class="vanclsearch"> 此 处 显示 class "vanclsearch" 的 内 容 </div> 
<div class="navlist"> 此 处 显示 class "navlist" 的 内 容 </div> 
</header> 
<div class="clearfloat"></div> 
<section class="content"> 
<div class="vanclimg"> 此 处 显示 class "vanclimg" 的 内 容 </div> 
<div class="getguanggao"> 此 处 显示 class "getguanggao" 的 内 容 </div> 
<div class="miaosha"> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="miaosha_contoiner"> 此 处 显示 class "miaosha_contoiner" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "te" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "tc" 的 内 容 </div> 
<div class="tc"> 此 处 显示 class "tc" 的 内 容 </div> 
<div class="vanclFoot"> 此 处 显示 class "vanclFoot" 的 内 容 </div> 
</div> 
</section> 
<div class="clearfloat"></div> 
<footer><div class="footerArea"> 此 处 显示 class "footerArea" 的 内 容 </div></footer> 
</div> 
</body> 
</html> 


8.2 商业 网 站 页 面 布局 


8.2.1 头 部 及 其 导航 


有 了 上 面 的 基础 ， 下 面 的 任务 就 是 利用 HTML 和 CSS 制作 一 个 完整 的 网 站 。 先 从 头 








使 用 HTML 设 计 商 业 网 站 





部 开始 ， 在 8.1.2 小 节 我 们 已 经 把 整体 框架 搭建 好 了 ， 就 像 盖 房子 一 样 ， 整 体 结构 已 经 出 
来 了 ， 下 面 就 需要 分 割 空间 了 。 先 分 析 一 下 头 部 : 头 部 分 为 三 个 部 分 ， 一 个 是 顶部 信息 登 
录 注册 部 分 ， 靠 右 侧 显 示 ; 一 个 是 搜索 栏 部 分 ， 也 靠 右 侧 显示 ; 还 有 一 个 是 导航 栏 部 分 ， 
居中 显示 。 因 此 ， 布 局 时 需 插 入 三 个 div， 两 个 在 右 侧 显示 ， 一 个 通栏 居中 显示 。 另 外 还 
有 很 多 种 实现 方法 ， 如 logo 用 hl 标签 ， 搜 索 用 span， 或 者 把 logo 作为 背景 图 片 也 是 可 以 
的 。 不管 采用 哪 种 方法 ， 要 根据 页 面 的 需求 选用 一 种 最 合理 的 方法 。 如 果 要 给 logo 加 上 链 
接 的 话 ， 那 么 就 不 能 用 背景 图 片 的 方法 了 。 


<header class="vanclhead"> 
<div class="headtoparea"> 此 处 显示 class "headtoparea" 的 内 容 </div> 
<div class="vanclsearch"> 此 处 显示 class "vanclsearch" 的 内 容 </div> 
<div class="navlist"> 此 处 显示 class "navlist" 的 内 容 </div> 
</header> 


先 在 header 里 插入 以 上 三 个 块 元 素 ， 然 后 分 别 插入 相应 的 内 容 ， 在 顶部 登录 注册 信息 
中 ， 有 我 们 保存 好 的 图 片 ， 使 用 div 布局 ， 中 间 使 用 span 行内 标签 ， 把 内 容 添加 进去 ， 插 
入 后 代码 如 下 所 示 。 


<div class="headtop"> 

<div class="headerTopRight" style= "width: 126px:"> 

<div class="active"> 

<a class="mapDropTitle" style="color: #808080:"> 网 站 公告 </a> 

</div> 

<div class="payattention"><em></em> 

<a class="vweixinbox"> 

Si class="vweixin" style="background: url(img/w1.jpg) no-repeat left 3px:"></span> 
a> 

<a class="track vanclweibo" style="background: url(img/w2.jpg) no-repeat left 3px:"></a> 

</div> 














<span class="top"> 欢 迎 光临 优 客商 城 ! &nbsp:</span> 
<span><a class="top track"> 登 录 </a>&nbsp:|&nbsp: 
<a class="track"> 注 册 </a> 

</span> 

</div> 

<div class="recommendArea"> 

<a class="track"> 我 的 订单 </a> 

</div> 

</div> 

</div> 


搜索 栏 代码 : 


<div class="searcharea fi"> 

<div class="searchTab"> 

<div class="search fl"> 

<input type="text" class="searchTextfl" placeholder=" 搜 “水 柔 棉 "， 体 验 与 众 不 同 " defaultkey=" 水 柔 棉 " 
autocomplete="off'> 

<input type="button" class="searchBtn" onfocus="this.blur()"> 

<div> 
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<div class="gowuche fr pl"> 
<a> 购 物 车 (0)</a> 

<div> 

</div> 

<div class="hotword"> 


<p> 
热门 搜索 : 
<a href="#"> 免 活 衬 衫 </a> 


<a hre 伍 "#"> 运 动 户外 </a> 
<a href="#"> 家 居 </a> 


导航 栏 代码 : 


<u> 

<li class="vancllogo Con pa"> 

<a href="#"></a> 

</li> 

<l> 

<a hre 伍 "#"> 首 页 </a><span class="NavLine"></span> 
</li> 


<li> 泡 泡 纱 </li> 

</ol> 

</div> I 

</a><em style="display:block:width:25px; height:13px; background:url(img/icon_hot.png) no-repeat scroll; 
position:absolute:left:67px:top:-5px:"></em><span class="NavLine"></span> 

<l> 


< 记 能 本 能 了 T 者 <li> 
<li>POLO 衫 </li> 
> 字 系 列 </1i> 
> 复 刻 系列 </li> 
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<1> 顾 湘 <1i> 

<1i> 山 鸟 板 </i> 

<li> 神 奇 动物 <lli> 

<1i> 脏 画 </i> 

<1i> 小 宇宙 <li> 

<1> 电 影 台 词 <i> 

<1i> 科 学 怪人 <i> 

<1H> 小 王子 </1i> 

<1i> 宇 航 </li> 

<l> 渤 </li> 

< 这 学 霸 </li> 

<1i> 运 动 T 恤 </1i> 

</ol> 

</div> 
</a><emstyle="display:block:width:25px:height:13px:backgroundrurl(imgyicon hot.png) 
Do-repeatscroll:position:absolute:left:67px:top:-Spx:"></em><span class="NavLine"></span></li> 
<1i> 


</a><span class="NavLine"></span></li> 
<li> 


<1li> 空 调 衫 </li> 
< 这 棉线 衫 </li> 
<li> 羊 毛 衫 </1i> 
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<1i> 
<a hre 伍 "#"> 家 居 饰 品 
<div class="hover"> 


接 下 来 定义 CSS， 经 过 测量 ， 头 部 注册 登录 部 分 是 通栏 显示 ， 所 以 这 里 宽度 我 们 是 按照 
100% 来 设计 的 ， 测 量 后 高 度 是 32px， 底 部 边框 颜色 设 为 #ccc， 更 加 明显 一 些 ， 背 景 颜色 是 
检 7f7f7, 下 面 在 CSS 里 把 这 些 参数 都 给 定义 上 , 看 显示 的 效果 和 效果 图 中 的 效果 是 不 是 一 样 的 。 


-headtoparea {width: 100%:height: 32px:border-bottom: 1px solid #cce:color: #808080:;background: 
#7f7f7:} 
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预览 时 用 户 会 发 现 ， 和 效果 图 对 比 位 置 有 些 颠 倒 ， 而 且 也 不 是 居 右 边 显 示 ， 所 以 ， 下 
我 们 不 但 要 设置 它们 的 位 置 和 字体 样式 ， 而 且 还 要 设置 显示 方式 。 代 码 如 下 : 


.headerTopRight {float: right:position: relative:} 

.headtop {width:1200px:height:31px:line-height:32px:margin:0 auto;_overflow:hidden:;background: #f7f7f7;} 
-active {width: 70px:height: 18px:line-height: 18px:margin: 7px Opx 0 Opx:float: left:display: inline; 
position: relative;z-index: 1000:cursor: pointer:color: #808080 !important:} 

.mapDropTitle {background: url(../img/notice.png) no-repeat scroll Opx Opx:width:55px;padding-left: 26px; 
text-align: left:background-position: Opx Opx:display: block:} 

.payattention {float: right;} 

.vweixinbox {position: relative:} 

.vweixin {float: left;:margin-left: 10px:display: inline:cursor: pointer:height: 21px;width: 20px; 

margin-top: 4px;} 

.vanclweibo {float: left;margin-top: 4px:background-position: -48px -23px:width: 20px:height: 25px:} 
.headerTopLeft {min-width: 240px:_width: auto!important: width: 280px:float: right:} 

-TecommendArea {margin: Opx 0 0 13px:float: left:display: inline:} 

.loginArea {float: left:} 

.track {color: #808080:;} 




















我 们 把 注册 登录 栏 分 为 topright 和 topleft 两 个 部 分 ， 都 设置 为 float:right， 向 右 浮动 显 
示 ， 然 后 设置 行 高 及 宽度 。 

active 主要 设置 了 宽度 和 高 度 ， 以 及 行内 显示 。 对 于 z-index 需要 重点 说 明 一 下 ， 是 在 
定位 过 程 中 ， 关 于 元 素 堆 登 顺序 的 优先 问题 ， 默 认 值 为 0， 如 果 为 正 值 ， 则 优先 级 较 高 ， 
如 果 为 负 值 ， 则 优先 级 较 低 。cursor 属性 是 用 来 设置 鼠标 形状 的 ， 值 为 pointer 时 ， 则 在 鼠 


标 悬 停 时 ， 光 标 呈 现 手 的 形状 。 还 有 更 多 值 设置 ， 这 里 就 不 一 一 介绍 了 。 其 中 一 个 颜色 设 
置 后 面 我 们 添加 了 一 个 !important 值 , 这 是 为 该 属性 设置 了 优先 级 。 如 果 我 们 前 面 为 同一 属 
性 设置 了 颜色 ， 这 里 也 设置 颜色 并 带 上 这 个 !important， 则 按照 这 个 设置 的 值 优先 显示 。 

mapDropTitle 把 那个 喇叭 形 图 标 作为 一 个 背景 单一 设置 显示 ， 和 文本 内 容 呈 块 状 。 

在 设置 微 博 图 标 时 ， 可 以 使 用 background-position:-48px -23px: 来 设置 其 位 置 。 这 个 属 
性 许多 用 户 可 能 不 理解 是 干什么 用 的 ， 这 个 值 是 指 图 片 和 坐标 原点 的 偏 移 量 ， 分 为 x 坐标 
轴 和 y 坐标 轴 ， 原 点 位 置 是 外 层 块 元 素 的 左上 角 ， 这 个 坐标 原点 不 会 改变 。x 坐标 为 正则 
图 片 左 上 角 向 右 平移 ， 为 负 则 图 片 左 上 角 向 左 平移 ;，y 坐标 为 正则 图 片 左 上 角 向 下 平移 ， 
为 负 则 图 片 左 上 角 向 上 平移 。 这 里 设置 的 是 负 值 ， 则 背景 图 片 相 对 原点 向 左 平移 48px， 向 
上 平移 23px。 

到 此 ， 头 部 注册 登录 这 一 部 分 就 完成 了 ， 预 览 后 显示 的 和 效果 图 完全 一 致 。 下 面 来 对 
头 部 第 二 部 分 搜索 栏 进行 样式 设置 ， 图 片 是 居于 右 端 显示 的 ， 但 是 整个 显示 出 来 的 内 容 非 
常 凌乱 ， 很 不 规整 。 为 了 和 效果 图 一 致 ，CSS 代码 设置 如 下 。 

.vanclsearch {width: 1200px:height: 62px:margin: 20px auto 25px:} 

.searcharea {width: 438px:padding-top: 8px:} 

.searchTab {height: 29px:} 

.searchText {width: 249px:height: 27px:padding: Opx 5px:line-height: 27px: 

border: 1px solid #c9caca:} 

.searchBtn {width: 49px:height: 29px:border: none:cursor: pointer: 

background: url(../img/vanclsprite.png) no-repeat scroll -100px Opx:} 

.gowuche {width: 105px:height: 27px:border: 1px solid #c1383e: 


background: url(../img/vanclsprite.png) no-repeat scroll -154px Opx:z-index: 10:} 
.gowuche a {color: #fffffF:display: block:padding-left: 29px:padding-top: 6px:} 
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-hotword {width: 440px:padding-top: 5px:line-height: 18px:color: #727171;padding-left: 15px;} 

-hotword p a {padding-left: Spx:color: #727171;} 

通过 对 头 部 第 一 部 分 注册 登录 的 CSS 样式 的 设置 , 大 家 发 现在 设置 搜索 样式 上 就 非常 
的 简单 了 。 这 里 只 需要 把 它们 的 位 置 以 及 背景 图 片 设 置 好 就 可 以 了 ， 其 中 vanclsprite .png 
这 张 图 片 ， 它 里 面包 含 好 多 小 的 图 片 ， 需 要 把 相应 位 置 给 设置 好 。 比 如 : background:url 
(../img/vanclsprite.png) no-repeat scroll -100px 0px; 这 里 我 们 需要 的 是 搜索 这 个 小 图 片 ， 通 过 
在 这 个 大 图 片 中 测量 , 搜索 图 标 距离 x 为 100 像素 , 距离 y 轴 为 0, 所 以 需要 通过 -100px 0px 
来 设 定 其 位 置 ， 对 于 gouwuche 的 背景 图 片 也 是 一 样 的 。 

头 部 区 域 第 二 部 分 搜索 栏 设置 完毕 ， 预 览 后 达到 效果 ， 然 后 进行 第 三 部 分 导航 栏 的 设 
置 ， 导 航 分 为 网 站 logo 以 及 一 级 菜单 和 二 级 菜单 。 为 了 方便 ,直接 使 用 列表 和 ol 列表 ， 
也 可 以 都 使 用 ul 列表 或 者 都 使 用 ol 列表 。 为 了 易于 区 分 以 及 进行 CSS 设置 ， 我 们 分 别 使 
用 了 两 个 列表 元 素 ， 在 ul 列表 下 网 套 ol 列表 。 

预览 后 发 现 所 有 的 信息 都 是 居于 左 侧 向 下 平 铺 显示 ， 不 能 起 到 很 好 的 导航 作用 。 下 面 
设置 CSS 样式 ， 代 码 如 下 。 

.navlist {width: 1000px:height: 22px:margin: 30px auto:padding-left: 200px:z-index: 300;} 

.vancllogo_Con {position: absolute !important:left: 0:bottom: 0:padding: Opx !important: 

background: none;text-align: left:} 

.vancllogo_ Con a {display: block:width: 185px !important:height: 46px !important: 

background: url(../img/logo.png) no-repeat scroll:} 

.navlist ul li {float: left:width: 99px:line-height: 22px :padding: Opx Opx 10px:text-align: center: 

font-size: 16px:font-family: "Microsoft YaHei";position: relative;z-index: 220;} 

.navlist ul li a {color: #727171:position: relative;display: block:width: 100%6:height: 22px;} 

.navlist ul li a div {display: none:position: absolute:top: 22px:cursor: default;background: white:padding: 

2 ul li ahover div {display: block:border-top: Spx solid firebrick:cursor: pointer:} 

.navlist ul li a:hover div ol li:hover {color: firebrick:} 

.NavLine {display: block:height: 16px:width: 1px:border-right: solid 1px #888:position: absolute:right: 1px; 

top: Spx:overflow: hidden;} 

每 次 对 一 个 部 分 进行 设置 时 ， 我 们 首先 会 对 这 一 部 分 的 宽度 和 高 度 进行 设置 。 为 了 方 
便 后 面 的 调试 ， 可 以 在 每 次 设置 大 小 时 ， 把 边框 加 上 。 比 如 : border:1px solid red; 只 需要 在 
每 次 设置 边框 时 , 颜色 改变 一 下 ,这 样 就 更 加 容易 区 分 每 个 部 分 ， 在 整个 网 站 完成 确认 后 ， 
把 边框 宽度 归 0 即 可 ， 不 会 影响 整体 的 美观 。 

在 导航 栏 一 级 和 二 级 菜单 问题 上 ， 单 元 六 最 后 一 节 有 详细 的 介绍 ， 这 里 就 不 一 一 更 
述 了 。 

至 此 ， 网 站 第 一 大 部 分 头 部 就 完成 了 ， 预 览 一 下 效果 ， 与 效果 图 一 模 一 样 ， 这 说 明 我 
们 的 网 站 没有 问题 。 下 面 进行 主体 内 容 的 构造 。 


8.2.2 主体 


主体 部 分 大 家 通过 商业 网 站 整体 框架 图 可 以 看 到 ， 包 含 了 九 个 部 分 ， 内 容 繁琐 ,不 过 
都 比较 简单 ， 每 个 部 分 间 的 HTML 代码 或 者 CSS 样式 都 有 很 多 相似 的 地 方 ， 有 些 代码 就 
可 以 进行 复 用 。 这 九 个 部 分 分 别 是 轮 播 图 部 分 、 广 告 部 分 、 秒 杀 部 分 、T 恤 部 分 、 新 品 推 
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荐 部 分 、 优 先 推荐 部 分 、 下 装 推荐 部 分 、 更 多 推荐 部 分 和 底部 部 分 。 

首先 来 看 一 下 轮 播 图 部 分 ， 轮 播 图 这 一 部 分 在 这 里 就 用 一 张 图 片 代替 一 下 。 那 么 我 们 
发 现 轮 播 图 部 分 和 广告 部 分 都 非常 简单 ， 这 里 就 不 再 拆 分 开 来 ，HIML 代码 如 下 。 

<div class="vanclimg"> 

<img src="img/lunbojpg" /> 
</div> 
<div class="getguanggao"> 
<img src="img/lunbo 2.jpg" /> 

</div> 

只 需要 设置 它们 的 宽度 和 高 度 以 及 位 置 即 可 ， 其 CSS 样式 如 下 。 

.content {width: 1200px:;margin: auto;} 

.vanclimg {width: 1200px:height: 535px:overflow: hidden:position: relative:z-index: 5;} 

:vanclimg img {width: 100%;} 

-getguanggao {margin: 20px 0;} 

可 以 发 现 只 需要 四 行 代码 就 可 以 完成 主体 部 分 中 轮 播 图 和 广告 两 个 部 分 的 CSS 样式 
修饰 ， 关 于 这 两 个 部 分 重要 的 是 外 边 距 问题 ， 那 么 只 要 设置 好 外 边 距 就 可 以 了 。 

然后 是 每 日 秒杀 部 分 ， 包 含有 一 张 通栏 的 图 片 以 及 4 个 抢购 在 售 的 图 文 介绍 。 我 们 选 
取 使 用 DIV+CSS 进行 布局 和 修饰 , 大 家 可 以 发 现 , 工 恤 部 分 以 及 新 品 推荐 部 分 的 布局 方式 
和 每 日 秒杀 部 分 的 布局 方式 大 致 是 一 致 的 ， 也 可 以 放 到 一 起 进行 统一 的 布局 。 在 div 中 ， 
仍然 使 用 ul 列表 来 包含 这 些 图 片 和 对 图 片 介绍 的 文本 内 容 ，HTML 代码 如 下 。 


Ee 秒杀 部 分 三 


iaosha-productname"> 优 客 空调 衫 铁 空 短 袖 套 衫 女 款 宝石 蓝 色 </p> 
< WE -miaosha-oldprice"> 王 288</p> 
<p class="pr"><spanclass="new-miaosha-saleprice">¥ 126</span> 
<span class="new-miaosha-afterdeposit"> 充 值 后 <em>63</em> 元 </span></p> 
</a> 
</> 
<li> 
<a href="#"> 
<img src="img/miaosha2.jpg" 
<p class="newr- 人 法 兰 绒 领 尖 扣 男 款 灰色 铅笔 条 </p> 
<p class="new-miaosha-oldprice">¥ 298</p> 
<p class="pr"><span class="new-miaosha-saleprice">¥ 158</span> 
<span class="new-miaosha-afterdeposit"> 充 值 后 <em>79</em> 元 </span></p> 
</a> 
<> 
<l> 
<a href="#"> 
<img src="img/miaosha3.jpg" /> 
<p class="new-miaosha-productname"> 优 客 内 裤 莫 代 尔 男 款 浅 灰色 </p> 
<p class="new-miaosha-oldprice"> 王 78</p> 
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<p class="pr"><span class="new-miaosha-saleprice">¥ 58</span> 
<span class="new-miaosha-afterdeposit"> 充 值 后 <em>29</em> 元 </span></p> 

</a> 

<li> 

<1i> 

<a href="#"> 

<img src="img/miaosha4.jpe”" 

es 全 包 华 夫 格 防滑 款 浅 蓝 </p> 

<p class="new-miaosha-oldprice">¥ 68</p> 

<p class="pr"><span class="new-miaosha-saleprice" ¥ 58</span> <span class= 
"new-miaosha-afterdeposit"> 

充值 后 <em>29</em> 元 </span></p> 

</a> 

</l> 

<> 

<a href="#"> 

<img src="img/miaosha5.jpg" /> 

<p class="new-miaosha-productname"> 优 客 帆布 鞋 男 款 纯 白色 </p> 

<p class="new-miaosha-oldprice">¥ 298</p> 

<p class="pr"><spanclass="new-miaosha-saleprice" ¥ 218</span> <span class= 
"new-miaosha-afterdeposit"> 

充值 后 <em>109</em> 元 </span></p> 

</a> 

<l> 

<u> 

</div> 

<!- 优 客 工 恤 部 分 -> 

<img stc="img/vancl T.jpg" /> 

<div class="miaosha_container w4"> 

<u> 

<I> 

<a href="#"> 

<img src="img/vancl Tl.jpe"/> 

</a> 

< 人 li> 

<li> 

<a href="#"> 

<img src="img/vancl T2.jpg" /> 

<div> 

</div> 

</a> 

<> 

<l> 

<a href="#"> 

<img src="img/vancl T3.jpg" /> 

</a> 

</li> 

<li> 

<a href="#"> 

<img strc="img/vancl T4.jpg" /> 

</a> 

</li> 

</ul> 

</div> 

<!- 新 品 推荐 部 分 -> 

<img ste="img/xptjpg" /> 
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<div class="miaosha_contoiner w4"> 
<ul> 

<1i> 

<a href="#"> 

<img sre="img/xptl.jpg" /> 

</a> 


<a href="#"> 

<img sre="img/xpt3.jpg" /> 

</a> 

<I> 

<li> 

<a href="#"> 

<img src="img/xpt4.jpg" /> 

</a> 

<l> 

</ul> 

</div> 

需要 把 列表 横向 排列 ， 并 设置 相应 的 边 距 和 新 旧 价格 的 样式 。 先 前 价格 需要 
line-through， 目 前 的 价格 需要 设置 为 红色 ， 充 值 后 的 价格 字体 需要 变 大 加 粗 。 只 要 清楚 需 
要 对 哪些 部 分 进行 设置 ， 如 何 设置 ， 并 了 解 每 部 分 之 间 的 关系 ， 是 否 有 相同 或 者 相似 的 地 
方 ， 这 样 ， 在 设置 样式 的 时 候 ， 只 需要 给 相同 的 地 方 起 一 样 的 类 名 ， 就 能 在 设置 样式 时 ， 
统一 使 用 这 个 类 名 。 对 于 每 日 秒杀 部 分 、 优 客 工 恤 部 分 、 新 品 推荐 部 分 ， 它 们 有 相同 的 地 
方 ， 所 以 大 家 可 以 一 起 进行 统一 管理 ， 统 一 设置 。 其 CSS 代码 如 下 。 


/# 每 日 秒杀 、 优 客 工 恤 、 新 品 推荐 三 部 分 杖 

.miaosha {width: 100%:;margin: 0 auto:} 

.miaosha_container {width: 1200px:color: #474747:font-weight: bold:margin: 0 auto:font-family: "Microsoft 
YaHei";} 

.miaosha_container ul {overflow: hidden:margin: 10px 0 0 0:padding: 0:width: 1210px:} 
.miaosha_container ul li {float: left;width: 232px:margin-right: 10px:} 

.miaosha_container ul li img {width: 100%:;} 

.new-miaosha-productname {font-size: 16px:margin-top: 10px:height: 45px;font-weight: normal:} 
.new-miaosha-oldprice {display: block:color: #d3d3d3;font-size: 14px; 

text-decoration: line-through:font-weight: normal:} 

.new-miaosha-saleprice {display: block:color: #bb2b34:font-size: 16px:} 

.new-miaosha-afterdeposit {position: absolute:right: 10px:bottom: 0:font-size: 16px:font-weight: normal:} 
.new-miaosha-afterdeposit em {font-size: 24px:font-style: normal:color: #bb2b34:font-weight: bolder:} 
.w4 ul li {width: cale(100% / 4 - 10px) important:} 

-wt ul,-w4 ul {width: 100%:;} 

.wt ul li {width: cale(100% / 3 - 10px) important:} 


然后 预览 效果 ,发 现下 面 所 有 的 图 片 和 文本 介绍 都 横向 排列 ,我 们 也 可 以 通过 table 
表格 来 进行 布局 ， 但 是 在 div 下 使 用 无 序列 表 或 有 序列 表 会 更 加 美观 ， 更 容易 统一 进行 管 
理 和 操作 。 其 中 ，width 属性 的 值 我 们 设置 为 calc(100% / 4-10px)， 是 通过 计算 的 方式 均 分 
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每 个 二 块 的 宽度 ， 共 有 4 个 i， 这 样 通栏 宽度 除 以 4， 也 就 是 每 个 的 宽度 了 。 这 种 计算 方 
式 更 加 准确 无 误 ， 而 且 可 以 动态 地 适应 各 种 大 小 的 窗口 。 

比较 复杂 的 就 是 优选 推荐 部 分 ， 大 家 会 发 现 图 片 大 小 不 一 ， 占 用 整个 页 面 的 面积 也 不 
同 ， 如 果 使 用 表格 设置 ， 虽 然 也 可 以 实现 ， 但 不 够 灵活 。 在 布局 方面 ，div 会 更 加 灵活 多 
变 并 易于 控制 ， 那 么 我 们 把 每 个 图 片 部 分 及 文本 介绍 部 分 分 别 使 用 div 包 好 。HTML 代码 
如 下 。 

<!- 优 选 推荐 -> 

<p class="te"> 优 选 推荐 </p> 

<div class="container w3"> 

<div class="w3left"><img src="img/youxuanl.jpe"> 

<p class="pr brl"> 

<span class="leftw3 pa"> 吉 国武 衬衫 </span> 

<span class="rightw3 pa"> 充 值 购买 更 优惠 </span> 


<div> 
<div class="w3center"> 

<div> 

<img src="img/youxuan2.jpg" /> 

<p class="pr brl"> 

<span class="leftw3 pa"> 新 品 到 货 </span> 

<span class="rightw3 pa"> 充 值 购 买 更 优惠 </span> 


<div class="w3right"> 
<img src="img/youxuan4.jpe" /> 

<p class="pr brl"> 

<span class="leftw3 pa"> 运 动 户外 </span> 

<span class="rightw3 pa"> 充 值 购买 更 优惠 </span> 
</p> 

</div> 

</div> 

<div class="container w3"> 

<div class="w3left"><img src="img/youxuan5.jpg"> 
<p class="pr brl"> 

<span class="leftw3 pa"> 夏 日 休闲 短 袖 衬衫 </span> 
<span class="rightw3 pa"> 充 值 购买 更 优惠 </span> 
<p> 

</div> 

<div> 

<div class="w3center"> 

<div> 

<img src= "img/youxuan6.jpg" /> 

<p class="pr br1"> 
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<span class="leftw3 pa"> 纳 米 防 污 工 袖 </span> 
<span class="rightw3 pa"> 充 值 后 相当 于 199 元 </span> 


<span class="leftw3 pa"> 潮 鞋 来 袭 </span> 
<span class="rightw3 pa"> 充 值 购买 更 优惠 </span> 


<div class="w3right"> 

<img src="img/youxuan8.jpg" /> 

<p class="prbrl"> 

<span class="leftw3 pa"> 沙 滩 裤 </span> 

<span class="rightw3 pa">2 件 8 折 3 件 7 折 </span> 


预览 时 发 现 出 现 字体 县 加 和 图 片 排列 错乱 ， 相 比 效果 图 有 很 大 的 差别 ， 这 是 因为 我 们 
没有 对 这 一 部 分 进行 样式 设置 。 其 CSS 代码 如 下 。 


族 优 选 */ 
‘tc {text-align: center:;color: #9A9A9A:font-size: 16px:margin: 20px 0;} 


.container w3 {width: 100%;} 

.Ww3left {float: left;width: 580px:} 

-Ww3left img {width: 100%;} 

.brl {top: -4px:border-left: 1px solid rgba(0, 0, 0, 0.1):border-right: 1px solid rgba(0, 0, 0, 0.1); 

border-bottom: 1px solid rgba(0, 0, 0, 0.1):padding: 28px 0:} 

-leftw3 {top: 20px:left: 10px:} 

Tightw3 {top: 20px:right: 10px:color: #D90009:;font-weight: 700;} 

.W3center {margin: 0 20px:width: 290px:float: left;} 

-w3right {width: 286px:float: left;} 

预览 后 发 现 和 效果 图 一 致 ， 由 此 可 以 看 出 使 用 div 来 进行 布局 是 多 么 的 方便 。 在 代码 
中 rgba(0,0,0,0.1) 是 用 来 调 色 的 ， 其 中 前 三 个 值 代表 红 、 绿 、 蓝 ， 取 值 范 围 是 从 0 到 255 的 
整数 或 0% 到 100% 之 间 的 百分比 数 ， 第 四 个 值 是 透明 度 ， 范 围 为 0.0 到 1.0 之 间 ，0.5 为 半 
透明 ，0.0 是 完全 透明 ，1.0 是 不 透明 ， 本 次 设置 的 是 非 透 明 的 黑色 。 

后 面 是 下 装 推荐 部 分 和 更 多 推荐 部 分 ， 发 现 这 两 个 部 分 和 前 面 每 日 秒杀 部 分 的 布局 方 
式 是 一 样 的 ，HTML 代码 如 下 。 


<!- 下 装 推荐 -> 
<p class="te"> 下 装 推荐 </p> 


<span class="leftw3 pa"> 休 闲 裤 </span> 
<span class='rightw3 pa"> 充 值 购买 相当 于 79 元 起 </span> 
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<p> 

</a> 

<> 

<l> 

<a href="#"> 

<img src="img/xiazhuang2.jpg" /> 

<p class="pr br1"> 

<span class="leftw3 pa"> 牛 仔裤 </span> 

<span class="rightw3 pa"> 充 值 购买 相当 于 79 元 起 </span> 


<img sre="img/xiazhuang3.jpg" /> 
<p class="pr brl"> 

<span class="leftw3 pa"> 针 织 裤 </span> 

<span class="rightw3 pa"> 充 值 购买 相当 于 49 元 起 </span> 


<span class="leftw3 pa"> 女 裤 </span> 
<span class="rightw3 pa"> 充 值 购买 相当 于 79 元 起 </span> 


<!-- 更 多 推荐 -> 

<p class="tc"> 更 多 推荐 </p> 

<div class="miaosha_container wt"> 
<u> 

<li> 

<a href="#"> 

<img stre="img/jingpinl .jpg" /> 
</a> 


<img stc="img/jingpin5.jpg" /> 
</a> 
<li> 
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<> 

<a href="#"> 

<img src="img/ijingpin?2.jpg" /> 
</a> 


<img ste="img/jingpin6.jpe" /> 

</a> 

</li> 

Aul> 

</div> 

预览 后 ， 我 们 发 现 和 效果 图 是 一 样 的 ， 这 是 因为 布局 方式 和 每 日 秒杀 的 布局 方式 是 一 
致 的 ， 而 且 我 们 所 使 用 的 类 名 也 是 一 样 的 ， 所 以 此 处 就 不 用 重复 进行 设置 了 。 

最 后 是 主体 部 分 中 的 底部 区 域 ， 主 要 包含 4 块 内 容 ， 有 客服 热线 、7 天 退货 、 二 维 码 
扫描 以 及 下 面 的 导航 内 容 , 在 这 里 就 轻车熟路 了 , 我 们 仍然 使 用 div 下 的 ul 列表 进行 布局 。 
HTML 代码 如 下 。 


<!-- 底 部 --> 

<div class="vanclFoot" style="margin-top:0px:"> 
<div class="vanclCustomer publicfooterclear"> 
<ul> 

<1i> 

<a href="#"> 

<p class="onlineTime"> 7X9 小 时 在 线 客服 </p> 


<p class="seven"><img src="img/online?2.png" style="width:auto:height:auto;"></p> 
<p>7 天 内 退货 </p> 

<p> 购物 满 199 元 免 运费 </p> 

</a> 

</li> 

<li class="twocode"> 

<p><img src="img/online Client.jpg" style= "width: 104px: height: 104px:"></p> 
<p> 扫描 下 载 <em style="color: firebrick:font: bolder:"> 优 客 </em> 客 户 端 </p> 
<> 

</ul> 

</div> 

<div class="vanclOthers publicfooterclear"> 

<Ul> 

<l> 

<a href="#" target=" blank"> 关 于 优 客 </a> 

<l> 

<li> 
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<a hre 人 >"#" target=" blank"> 新 手指 南 </a> 
< 中 > 

<1i> 

<a href="#" target=" blank"> 配 送 范围 及 时 间 </a> 
<> 

<li> 

<a href="#" target=" blank"> 支 付 方 式 </a> 
Ai> 

<li> 

<a href="#" target=" blank"> 售 后 服务 </a> 
</li> 

<li class="none"> 

<a href="#" target=" blank"> 帮 助 中 心 </a> 
</li> 

</ul> 

</div> 

</div> 

</div> 


对 于 这 一 部 分 ， 直 接 进行 CSS 样式 设置 。 


人 # 底 部 所 

.vanclFoot {overflow: hidden:width: 1118px:height: 282px:margin: Opx auto:padding: Opx 40px Opx; 
border: 1px solid #eQeQe1;font-family: "Microsoft YaHei";margin-bottom: 25px;} 

.VanclCustomer {margin: 33px Opx 23px:overflow: hidden:} 

.vanclCustomer ul li {width: 370px:height: 138px:border-right: 1px solid #e0e0el:margin-right: Opx:float: 
left;} 

.twocode,.none {border: none  !important:} 

.vanclCustomer ul li p {text-align: center:font-size: 14px;color: #727171:line-height: 26px;} 
.vanclOthers {height: 26px:padding: 17px Opx 14px:background: #f8f8f8:;width: 100%:margin: 0:} 
.vanclOthers ul li {padding: Opx 65px:line-height: 26px:border-right: 1px solid #dadadb:;width: auto; 
text-align: center;margin-right: Opx:float: left:} 


预览 整个 主体 的 9 个 部 分 ,发 现 和 效果 图 是 完全 一 致 的 , 至 此 ,主体 的 9 个 部 分 的 HTML 
和 CSS 样式 设置 就 做 好 了 ， 下 面 进行 底部 的 开发 。 


8.2.3 底部 部 分 及 快捷 操作 部 分 


底部 部 分 包含 两 块 内 容 ， 一 部 分 是 版 权 ， 另 一 部 分 是 网 站 的 安全 保障 logo 图 片 ， 同 样 
可 以 使 用 两 个 div 分 别 包 含 这 两 块 内 容 。HTML 代码 如 下 。 


<!-- 底 部 footer--> 

<div class="footerArea"> 

<div class="footBottom"> 

<div class="footBottomTab"> 

<p> Copyright 2007 - 2018 youcl.com All Rights Reserved 粤 ICP 证 101535 号 粤 公 网 安 备 
11011502002400 号 出 版 物 经 营 许可 证 新 出 发 粤 批 字 第 直 110478 号 </p> 

<p> 优 客 (深圳 ) 科技 有 限 公司 </p> 

</div> 

</div><span class="blank20"></span> 

<div class="subFooter"> 

<a rel="nofollow" href="#" class="redLogo" target="_blank"></a><span class="customeOrg"></span> 
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<a rel="nofollow" href="#" class="wsjyBzzx" target="_blank"></a> 

<a rel="nofollow" href="#" class="vanclMsg" target="_blank"></a> 

<a class="vanclqingNian" href="#" rel="nofollow"></a> 

<a href="#" style="display: inline-block:" target="_blank"><img style="width: 120px: height: 39px:" 
src="img/footer6.jpg"></a> 

<div class="blank0"></div> 

<div> 

<div> 


下 面 设置 其 CSS 样式 , 文本 内 容 居 中 显示 ， 安 全 保障 图 片 横向 排列 居中 显示 。CSS 文 
件 如 下 。 


/# 第 三 大 部 分 底部 footer*/ 

.footBottom {width: 100%;height: auto;margin: Opx auto:border-top: 1px solid #3e3a39;} 

.footBottomTab {width: 1200px:height: auto:margin: 10px auto;} 

.footBottomTab p {text-align: center:line-height: 2Spx:color: #3e3a39:font-family: "Microsoft YaHei";} 

.blank20 {display: block:width: 100%:height: 20px:line-height: Opx;font-size: Opx:clear: both:overflow: 

hidden;} 

.subFooter {width: 980px:margin: Opx auto 25px:text-align: center:} 

TedLogo {background: url(../img/footer].png) no-repeat 0 0 transparent:background-size: 100% 100%; 

display: inline-block:height: 42px:width: 113px:} 

.subFooter a,.subFooter span {margin: 0 10px:} 

.WsjyBzzx {background: url(../img/footer2.png) no-repeat 0 0 transparent:background-size: 100% 100%; 

display: inline-block:height: 42px:width: 96px:} 

.vanclMsg {background: url(../img/footer3.png) no-repeat 0 0 transparent:background-size: 100% 100%; 

display: inline-block;height: 42px:width: 101px:} 

.vanclqingNian {background: url(../img/footer4.png) no-repeat 0 0 transparent:background-size: 100% 100%%; 

display: inline-block;height: 42px:width: 101px:} 

.blank0 {display: block:width: 100%:height: Opx;line-height: 0px:font-size: Opx:clear: both;overflow: 

hidden;} 

这 里 ， 我 们 把 图 片 logo 作为 背景 图 片 ， 其 中 有 个 属性 值 是 transparent， 是 背景 透明 的 
意思 ， 其 实 对 于 背景 其 默认 值 就 是 透明 ， 不 过 设置 这 个 值 就 可 以 在 以 后 使 用 js 时 ， 起 到 屏 
项 的 作用 ， 后 面 大 家 会 了 解 到 js 的 使 用 ， 在 此 就 不 做 具体 介绍 了 。 

还 有 最 后 图 片 定位 部 分 ， 就 是 在 效果 图 右 下 角 ， 无 论 上 下 滚动 条 如 何 滚动 ， 图 标 位 置 
一 直 保持 不 变 。HTML 代码 如 下 。 


<div class="BayWindow" style="position: fixed; right: 10px: bottom: 20px: z-index:10"> 

<img src="img/fixed.png" > 

</div> 

代码 比较 简单 ， 这 里 就 直接 使 用 CSS 行内 样式 ， 直 接 通 过 固定 定位 ， 把 图 片 定位 到 距 
离 底部 20px、 右 端 10px 处 ， 无 论 页 面 如 何 滚动 ， 定 位 图 标 都 不 会 改变 。 那 么 到 这 里 ， 我 
们 整个 的 优 客商 城 商业 网 站 就 完成 了 。 


8.2.4 ”相对 路 径 和 相对 于 根 目录 路 径 


在 相对 路 径 和 绝对 路 径 中 ，../ 表 示 返 回 上 一 级 ， 因 为 css 文件 在 css 文件 夹 下 ， 图 片 在 
img 文件 夹 下 ,那么 layout.css 就 需要 返回 上 一 级 找到 img 文件 夹 才能 找到 相应 的 图 片 。 直 
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接 文件 夹 名 或 是 ./ 开 头 表示 当前 目录 ， 因 为 index.html 和 img 文件 夹 平 级 。 不 管 是 带 ../ 还 是 
不 带 ， 这 种 写法 都 叫 相对 路 径 ， 另 一 种 叫 相对 于 根 目录 路 径 ， 它 的 写法 必须 以 /开始 ， 意 思 
是 从 根 目录 开始 一 级 一 级 向 下 查找 ， 不 管 在 哪里 ， 要 使 用 pic4.gif 这 个 图 片 ， 路 径 都 必须 
是 /img/pic4.gif; 还 有 一 种 写法 叫绝 对 路 径 ， 是 以 http:// 加 域名 开始 的 。 

使 用 相对 路 径 时 ， 当 根 目录 放 到 一 个 二 级 目录 下 时 ， 文 件 仍然 可 以 正常 访问 。 而 使 用 
相对 于 根 目录 路 径 时 ， 当 其 中 一 个 页 面 放 到 其 他 位 置 时 ， 照 样 能 关联 相关 的 图 片 和 其 他 文 
件 。 例 如 : 本 例如 果 用 相对 于 根 目录 路 径 的 话 ， 把 index.html 放 到 一 个 文件 夹 下 后 ， 还 是 
可 以 正常 访问 的 。 总 之 两 种 方法 各 有 优 劣 ， 可 以 根据 需要 采用 一 种 合适 的 方法 。 相 对 路 径 
和 相对 于 根 目录 路 径 是 可 以 相互 更 改 的 ， 大 家 可 以 根据 自己 的 需要 进行 相应 的 运用 。 


【单元 小 结 】 
。 商业 网 站 设计 过 程 中 ， 一 定 要 分 清楚 网 站 的 整体 结构 布局 方式 。 


e 网 页 布局 结构 一 般 是 上 中 下 或 左 中 右 形式 ， 其 任意 一 部 分 可 以 包含 更 小 的 布局 
结构 。 


【单元 自 测 】 


1. 单个 网 页 的 整体 布局 一 般 通 过 ( 。 “”) 来 实现 。 
A. Table B. table+ 元 素 属性 
C. CSS D. CSS+DIV 
2. 如 何 让 设置 了 浮动 的 元 素 不 脱离 整个 框架 ? (。 ) 
A. clear:left B. clear:right 
C. clear:both D. clear:auto 
3. 以 “/” 开 头 的 路 径 称 为 ( ”)。 
A. 根 相对 路 径 B. 相对 于 当前 网 页 的 路 径 
C. 绝对 路 径 D. 系统 路 径 


【上 机 实战 】 


上 机 目标 


使 用 CSS+DIV 实现 网 页 布局 。 
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上 机 练习 
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练习 1: 使 用 CSS+DIV 实现 个 人 主页 


【问题 描述 】 
需要 实现 的 个 人 主页 如 图 8-4 所 示 。 


图 8-4 需要 实现 的 个 人 主页 


【问题 分 析 】 
该 网 页 存在 左右 边 距 且 所 有 内 容 水 平 居中 显示 , 宽度 为 700px。 整个 页 面 明显 分 为 上 、 中 、 
下 三 部 分 ， 其 中 中 间 部 分 又 分 为 左右 两 部 分 。 可 以 先 设置 布局 ， 后 调整 细节 。 


【参考 步骤 】 
(1) 按 上 中 下 结构 设计 index.html 页 面 的 内 容 代 码 如 下 。 


<!DOCTYPE html> 
<head> 
<title> 个 人 主页 </title> 
<meta charset="utf-8" /> 
<link rel="stylesheet" href="css/skin.css"/> 
</head> 
<body> 
<div id="container"> 
<div id="banner"> 
<img src="images/banner]l.jpg" border="0"> 
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<div> 

<div id="links"> 

<ul> 

<1H> 首 页 </1i> 

<li> 心 情 日记 <Ai> 

<li>Free</li> 

<1i> 一 起 走 到 </li> 

<1i> 从 明天 起 <li> 

<1i> 纸 飞机 </li> 

<l> 下 一 站 </li> 

</ul> 

<br> 

</div> 

<div id="leftbar"> 

<p><img src="images/selfpic1.jpg" class="picl"> 

<br> 我 的 日 记 本 </p> 

<p class="leftcontent"> 秋 天 过 半 的 时 候 ， 我 搭 上 了 一 列 火 车 。 我 不 知道 它 将 要 去 往 的 方向 ， 那 铁路 
看 上 去 无 休 无 止 地 延伸 着 。</p> 

<p><img src="images/selfpic2.jpg" class="picl"> 

<br> 心 情 轨迹 </p> 

<p class="leftcontent"> 无 意 间 发 现 ， 白 云 的 上 面 ， 长 着 许 许多 多 的 蒲公英 。 它 在 我 面前 迅速 地 长 

大 ， 风 吹 过 的 时 候 ， 纷 纷 升 起 ， 飞 向 无 尽 的 远方 。</p> 

</div> 

<div id="content"> 

<h4> 介 绍 </h4> 

<p> 火 车 经 过 一 个 又 一 个 站 台 ， 窗 外 漫 卷 的 蒲公英 向 我 微笑 着 。 我 逐渐 记 起 了 自己 旅行 的 目的 ， 一 

直 都 在 下 一 站 的 前 方 。 火 车 缓 缓 地 驶 入 站 台 ， 汽 笛 声响 的 那 一 瞬间 ， 车 厢 变 得 透明 ， 我 看 见 ， 自 己 


和 这 长 长 的 列车 一 起 ， 正 在 漫天 球 舞 着 的 蒲公英 中 飞行 。</p> 

<h4> 转 播 设备 </h4> 

<p> 我 现在 是 在 万 泉 河 附近 ， 我 们 的 转播 车 就 在 旁边 不 远 的 地 方 ， 师 传 马上 将 会 把 车 开 过 来 。 我 们 
的 转播 设备 非常 的 先进 ， 具 体 怎么 先进 我 也 说 不 清 ， 师 伟 比 我 清楚 ， 总 之 就 是 特别 特别 先进 。 好 ， 
现在 师傅 已 经 把 转播 车 开 过 来 了 。&hellip;&hellip; 


<p> 夕 阳 染 红 蓝天 <br> 
带 走 美好 的 一 天 <br> 

风 吹 过 大 地 <br> 

炫 美的 世界 <br> 

<br> 

霞光 点 亮 星 搬 <br> 
燃 起 辽 远 的 梦幻 <br> 
流星 划 过 夜空 <br> 
忆 起 逝 夜 的 歌声 <br> 
<br> 

是 谁 昨 夜 背 上 行囊 <br> 
唱 一 首 满载 风尘 的 歌 <br> 
今夜 才 又 想起 拥抱 的 时 刻 <br> 
<br> 


独自 走 的 一 段 旅程 <br> 

是 否 还 装 满 苦涩 <br> 

一 路 风雨 球 摇 那 坎坷 对 谁 说 <br> 
<br> 

来 吧 看 这 远 处 亮 起 的 点 点 星火 <br> 
伸手 触摸 那 写 在 匆匆 旅程 的 歌 <br> 
谁 在 转 过 的 街 口 从 容 挥 手 <br> 
谁 用 欢笑 和 拥抱 <br> 
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<div id="footer"> 版 权 所 有 2006.12.7 Next Station</div> 
</div> 

</body> 

</html> 


(3) 修改 skin.css 文件 ， 设 置 整体 的 margin、padding、 文 字 对 齐 和 背景 色 。 


Ee) repeat-y; 


(5) 设置 最 上 面 的 图 片 及 导航 条 样式 。 


margin:-18px 0px 0px 0px; /* 上 margin 一 定 要 设置 为 负 值 */ 
padding:Opx; 


position:relative; 

} 

#links ul{ 
list-style-type:none; 
width:700px: 


} 
#links ul li{ 
text-align:center; 


(6) 设置 中 间 部 分 左边 名 为 leftbar 的 DIV 的 样式 。 
#leftbar{ 
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Padding-left:12px; padding-right:12px: 
} 


(7) 设置 中 间 主 要 内 容 ， 也 就 是 名 为 content 的 DIV 的 样式 。 
#content{ 

font-size:12px; 

float:left; 

width:550px: 

padding:5px Opx 30px Opx; 

margin:0px; 

background:url(../images/bgl.jpg) no-repeat bottom right: 
} 

#content p, #content h4{ 

padding-left:20px; padding-right:15px; 


(8) 设置 底部 的 footer 的 样式 。 
#footer{ 


(9) 调整 内 容 ， 显 示 细节 的 样式 。 
.Picl{ 


(10) 运行 网 页 ， 结 果 如 图 8-4 所 示 。 
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练习 2: 使 用 上 中 布局 ， 实 现 如 图 8-5 所 示 的 网 页 





图 8-5 实现 上 中 布局 的 网 页 


【拓展 作业 】 


实现 如 图 8-6 所 示 的 页 面 。 
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© 课程 目标 


PP 了 解 移动 端 开发 模式 

P 掌握 媒体 查询 

PP 掌握 如 何 使 用 DIV 和 样式 表 布 局 

> 掌握 如 何 使 用 媒体 查询 进行 响应 式 布 局 
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多 En 

在 前 面 ， 相 信 大 家 已 经 可 以 使 用 DIV+CSS 设计 出 漂亮 的 网 页 了 。 不 过 ， 随 着 移动 设 
备 的 普及 ， 大 家 上 网 的 方式 发 生 了 巨大 变化 。 以 前 想 登 录 网 站 ， 看 点 信息 ， 都 需要 通过 电 
脑 来 看 , 现在 , 大 家 可 以 随时 随地 通过 自己 手中 的 智能 手机 或 ipad 来 看 世界 。 设备 的 变化 ， 
使 得 我 们 在 网 站 的 设计 方面 ， 无 论 从 样式 还 是 可 用 性 来 讲 ， 只 适合 电脑 桌面 显示 的 网 站 已 
经 难以 满足 用 户 日 益 增长 的 需求 了 。 那 么 ， 在 设计 网 站 的 时 候 就 必须 同时 考虑 多 种 屏幕 尺 
寸 和 用 户 体验 的 问题 。 

相信 大 家 也 有 自己 的 思考 ， 但 可 能 对 于 某 些 方面 还 是 没有 明晰 的 头绪 ， 那 么 接 下 来 就 
和 大 家 一 起 进入 移动 端 设 计 商 业 网 站 的 绚烂 世界 。 


9.1 viewport 


在 移动 互联 网 普及 之 前 ， 大 部 分 网 站 还 是 通过 PC 端 浏览 器 作为 标准 而 进行 设计 的 。 
随 着 2014 年 智能 手机 的 普及 和 4G 通信 标准 的 使 用 ， 移 动 互联 网 进入 高 速 发 展期 。 这 时 网 
站 的 页 面 设计 就 需要 同时 兼容 PC 端 和 移动 设备 端 这 两 种 页 面 标准 。 因 为 移动 设备 端的 显 
示 区 域 远 比 电脑 的 显示 区 域 小 ， 所 以 当 按照 PC 端 标准 设计 的 网 站 ， 在 移动 设备 进行 浏览 
时 常常 会 出 现 一 些 显示 问题 。 

为 了 让 手机 网 页 也 能 获得 良好 的 浏览 体验 ， 苹 果 公司 通过 在 Safari 浏览 器 中 定义 
viewport 属性 ， 解 决 了 不 同 浏览 设备 中 页 面 显示 的 问题 。 


9.1.1 什么 是 viewport 


viewport 属性 是 指 网 页 的 可 视 区 域 。viewport 中 文 为 “ 视 区 ”， 在 进行 网 页 设计 时 ， 
可 以 通过 设置 viewport 来 控制 浏览 器 上 的 显示 区 域 ,在 默认 情况 下 , 移动 设备 上 的 viewport 
是 要 大 于 浏览 器 可 视 区 域 的 ， 这 是 因为 移动 设备 的 分 辨 率 相对 于 电脑 桌面 来 说 要 小 一 些 ， 
所 以 为 了 能 在 移动 设备 上 正常 显示 为 PC 端 设计 的 网 站 ， 移 动 设备 上 的 浏览 器 都 会 把 自己 
默认 的 viewport 设 为 980px 或 1024px( 也 可 能 是 其 他 值 ， 这 个 由 设备 自身 所 决定 )， 且 浏览 
器 会 出 现 横向 滚动 条 ， 那 是 因为 浏览 器 可 视 区 域 的 宽度 是 比 这 个 默认 的 viewport 的 宽度 要 
小 ， 如 图 9-1 所 示 。 

viewport 就 是 让 网 页 开发 者 通过 其 大 小 ， 动 态 地 设置 其 网 页 内 容 中 控件 元 素 的 大 小 ， 
从 而 使 得 在 浏览 器 上 实现 和 Web 网 页 中 相同 的 效果 (比例 缩小 )。 如 今 绝 大 部 分 浏览 器 ( 即 主 
流 的 安 卓 浏览 器 和 iOS 浏览 器 ) 都 支持 对 viewport 的 控制 。 简 单 来 说 ， 大 家 可 以 用 viewport 
等 比 放大 或 缩小 浏览 器 来 进行 对 网 页 视 区 的 控制 。 
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图 9-1 viewport 视图 区 


9.1.2 viewport 的 语法 结构 


语法 : 
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, 
maxmum-scale=1.0"> 


viewport 属性 值 及 相应 描述 如 表 9-1 所 示 。 


表 9-1 viewport 属性 值 及 相应 描述 

值 描述 
width 设置 viewport 的 宽度 ， 可 以 为 一 个 数值 ， 又 或 者 是 width-device 
initial-scale 页 面 初始 的 缩放 值 ， 为 数字 ， 可 以 是 小 数 
minimum-scale 允许 的 最 小 缩放 值 ， 为 数字 ， 可 以 是 小 数 
maximum-scale 允许 的 最 大 缩放 值 ， 为 数字 ， 可 以 是 小 数 
height 设置 viewport 的 高 度 (一 般 不 用 设置 ) 
user-scalable 是 否 允 许 用 户 进 行 缩放 ，no 为 不 允许 ，yes 为 允许 


9.1.3 ”如 何 使 用 viewport 


以 下 是 一 个 页 面 的 代码 ， 当 这 个 页 面 未 设置 viewport 时 ， 在 PC 端 显示 效果 ， 如 图 9-2 
所 示 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>viewport 测试 </title> 
<style type="text/css"> 
html,body{font-size: 14px:} 
.div{padding: 20px:background: gold:font-size: 16px:} 
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img{width: 600px;} 

</style> 
</head> 
<body> 

<div class="div"> 

viewport 就 是 让 网 页 开发 者 通过 其 大 小 ,动态 地 设置 其 网 页 内 容 中 控件 元 素 的 大 小 ,从 而 使 得 在 
浏览 器 上 实现 和 web 网 页 中 相同 的 效果 (比例 缩小 )。 如 今 绝 大 部 分 浏览 器 里 ( 即 主流 的 安 卓 浏览 器 
和 iOS)， 都 支持 对 viewport 的 控制 ， 简 单 来 说 ， 我 们 可 以 用 viewport 等 比 放大 或 者 缩小 浏览 器 来 进 
行 对 网 页 视 区 的 控制 。 

</div> 

<img src imgltimg (1)jpg" /> 

</body> 
</html> 











图 9-2 未 设置 viewport 


通过 对 以 上 页 面 的 viewport 设置 ， 进 行 页 面 视 图 控制 。 这 种 设置 可 以 同时 适用 于 PC 
端 和 移动 端 。 

以 谷歌 浏览 器 (Chrome) 为 例 ， 进 行 页 面 调试 。 首 先 使 用 谷歌 浏览 器 打开 页 面 ， 按 F12 
快捷 键 或 者 单 击 鼠 标 左 键 ， 选 择 “ 检 查 命 令 ”， 进 入 调试 模式 ， 单 击 右 上 角 “ 切 换 设备 工 
具 栏 (toggle device toolbar)” 按 钮 进入 移动 端 调试 模式 ， 如 图 9-3 所 示 。 进 入 移动 调试 模式 
后 ， 如 图 9-4 所 示 。 


9-3 设备 切换 


在 未 设置 viewport 的 属性 时 ， 移 动 端 网 页 比例 不 合适 ， 图 片 和 字体 均 未 能 达到 合适 的 
效果 。 
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为 了 让 移动 端 显 示 合 适 的 页 面 比例 ， 我 们 可 以 对 viewport 进行 属性 设置 。 通 常设 置 页 
比例 为 “1.0”。 页 面 代码 如 下 。 




















<meta name="viewport" content="width=device-width, 
initial-scale=1.0.minimum-scale=1.0,maxmum-scale=1.0"> 
<style type="text/css"> 
html,body{font-size: 14px:} 
.div{padding: 20px:;background: gold:font-size: 16px:} 
img{width: 600px;} 
</style> 
</head> 
<body> 
<div class="div"> 
viewport 就 是 让 网 页 开发 者 通过 其 大 小 ， 动 态 地 设置 其 网 页 内 容 中 控件 元 素 的 大 小 ， 从 而 使 得 在 
浏览 器 上 实现 和 web 网 页 中 相同 的 效果 (比例 缩小 )。 如 今 绝 大 部 分 浏览 器 里 ( 即 主流 的 安 卓 浏 览 器 和 
iOS)， 都 支持 对 viewport 的 控制 ， 简 单 来 说 ， 我 们 可 以 用 viewport 等 比 放大 或 者 缩小 浏览 器 来 进行 
对 网 页 视 区 的 控制 。 
</div> 
“<img sre="img/timg (1)jpg" /> 
</body> 
</html> 


如 图 9-5 所 示 ， 移 动 端 页 面 内 容 大 小 和 PC 端 一 致 (比例 缩小 )。 可 以 看 到 下 面 有 一 个 横 
向 滚动 条 ， 是 因为 设备 宽度 为 375px， 而 图 片 宽度 设置 的 是 600px。 


图 9-4 进入 移动 调试 模式 9-5 设置 Viewport 后 


此 可 以 得 出 ， 由 于 各 设备 宽度 大 小 的 差异 ， 致 使 页 面 不 能 以 相同 像素 比例 显示 ， 通 
过 对 viewport 这 一 属性 的 设置 ， 我 们 可 以 动态 地 控制 其 网 页 内 容 中 控件 元 素 的 大 小 ， 从 而 
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使 得 在 浏览 器 上 实现 和 Web 网 页 中 相同 的 效果 (比例 缩小 )。 


9.2 @media 媒体 查询 


通过 viewport 虽然 可 以 动态 控制 网 页 大 小 ， 然 而 众所周知 ， 电 脑 、 平 板 、 手 机 的 屏幕 
差距 很 大 ， 假 如 有 一 个 页 面 ， 在 电脑 上 看 起 来 不 错 ， 但 如 果 放 到 手机 上 ， 那 可 能 就 会 杂乱 
无 章 ， 比 如 我 们 并 不 喜欢 的 横向 滚动 条 。 这 时 该 怎么 解决 呢 ? 虽然 你 也 可 以 再 专门 为 手机 
定制 一 个 页 面 ， 当 用 户 访问 的 时 候 ， 判 断 设备 是 手机 还 是 电脑 ， 如 果 是 手机 就 跳 转 到 相应 
的 手机 页 面 ， 例 如 百度 ， 手 机 访问 www.baidu.com 就 会 跳 转 到 m.baidu.com; 但 是 这 样 做 
对 于 一 些 简 单 的 页 面 来 说 ， 就 会 既 耗 时 又 费力 。 为 了 解决 这 一 问题 ， 大 家 可 以 使 用 自 适 应 
写法 ， 即 一 次 开发 ， 处 处 显示 。 


9.2.1 什么 是 @media 媒体 查询 


@media 媒体 查询 可 以 针对 不 同 的 媒体 类 型 定义 不 同 的 样式 。 即 在 不 同 的 设备 条 件 下 
使 用 不 同 的 样式 ， 使 页 面 在 不 同 终端 设备 上 达到 不 同 的 渲染 效果 ， 当 你 重 置 浏览 器 大 小 的 
过 程 中 ， 页 面 也 会 根据 浏览 器 的 宽度 和 高 度 重新 泻 染 页 面 ， 如 图 9-6 所 示 。 


ES 


iPhoneX 


图 9-6 ”响应 式 页 面 


9.2.2 @media 媒体 查询 语法 


大 家 都 知道 一 个 网 页 的 样式 是 由 CSS 控制 的 ， 所 以 媒体 查询 也 是 通过 CSS 控制 的 。 
CSS 语法 : 
@media mediatype( 媒 体 类 型 ) andlnotlonly (media feature( 媒 体 功能 )) { 


写 CSS 样式 
} 
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也 可 以 针对 不 同 的 媒体 使 用 不 同 的 CSS 样式 : 

<link rel="stylesheet" media= "mediatype andlnotlonly (media feature)" hre 全 "mystylesheet.css"> 

比如 在 同一 目录 下 写 了 三 个 样式 文件 ， 分 别针 对 平板 的 ipad.css，pe 的 pc.css 以 及 针 
对 手机 的 mobile.css; 那么 我 们 就 可 以 在 页 面 上 把 三 个 ess 文件 都 载 入 进去 , 浏览 器 解析 时 
会 根据 所 使 用 的 设备 选择 合适 的 css 文件 。 

<link rel="stylesheet" media="screen and (min-device-width : 641px) and (max-device-width : 1024px)" 

href="ipad.css"> 


<link rel="stylesheet" media=" screen and (min-device-width : 1025px)" hre 合 "pc.css"> 
<link rel="stylesheet" media=" screen and (max-device-width : 640px)" href="mobie.css"> 





| 一 般 ipad 的 宽度 为 1024px， 但 是 要 根据 实际 情况 ， 通 常 我 们 写 的 宽度 为 | 
| 641px-1024px; 小 于 等 于 640px 默认 为 手机 端 ， 大 于 1024px 默认 为 pe 端 。 | 
1 . . . . ) 





常见 媒体 类 型 对 照 如 表 9-2 所 示 。 


表 9-2 常见 媒体 类 型 


用 于 所 有 设备 


用 于 打印 机 和 打印 预览 
用 于 电脑 屏幕 、 平 板 电 脑 、 智 能 手机 等 
应 用 于 屏幕 阅读 器 等 发 声 设备 



























































常见 媒体 功能 对 照 如 表 9-3 所 示 。 
表 9-3 常见 媒体 功能 
值 描述 
aspect-ratio 定义 输出 设备 中 的 页 面 可 见 区 域 宽度 与 高 度 的 比率 
color 定义 输出 设备 每 一 组 彩色 原件 的 个 数 。 如 果 不 是 彩色 设备 ， 则 值 等 于 0 
color-index 定义 在 输出 设备 的 彩色 查询 表 中 的 条 目 数 。 如 果 没有 使 用 彩色 查询 表 ,， 则 
值 等 于 0 
device-aspect-ratio 定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 比率 
device-height 定义 输出 设备 的 屏幕 可 见 高 度 
device-width 定义 输出 设备 的 屏幕 可 见 宽度 
grid 用 来 查询 输出 设备 是 否 使 用 栅 格 或 点 
height 定义 输出 设备 中 的 页 面 可 见 区 域 高 度 
max-aspect-ratio 定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 
max-color 定义 输出 设备 每 一 组 彩色 原件 的 最 大 个 数 
max-color-index, 定义 在 输出 设备 的 彩色 查询 表 中 的 最 大 条 目 数 
max-device-aspect-ratio 定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 
max-device-height 定义 输出 设备 的 屏幕 最 大 可 见 高 度 
max-device-width 定义 输出 设备 的 屏幕 最 大 可 见 宽度 








了 








使 用 HTML 设 计 商 业 网 站 
























































( 续 表 ) 

值 描 述 
max-height 定义 输出 设备 中 的 页 面 最 大 可 见 区 域 高 度 
max-monochrome 定义 在 一 个 单 色 框架 缓冲 区 中 每 像素 包含 的 最 大 单 色 原 件 个 数 
max-resolution 定义 设备 的 最 大 分 辨 率 
max-width 定义 输出 设备 中 的 页 面 最 大 可 见 区 域 宽度 
min-aspect-ratio 定义 输出 设备 中 的 页 面 可 见 区 域 宽度 与 高 度 的 最 小 比率 
min-color 定义 输出 设备 每 一 组 彩色 原件 的 最 小 个 数 
min-color-index 定义 在 输出 设备 的 采 的 最 小 条 目 数 
min-device-aspect-ratio 定义 输出 设备 的 屏幕 可 见 宽 度 与 高 度 的 最 小 比率 
min-device-width 定义 输出 设备 的 屏幕 最 小 可 见 宽度 
min-device-height 定义 输 t 
min-height 定义 输出 设备 中 的 页 面 最 小 可 
min-monochrome 定义 在 一 个 单 色 框架 缓 六 
min-resolution 定义 设备 的 最 小 分 











min-width 定义 输出 设备 中 的 页 面 最 小 可 见 区 域 宽度 
monochrome 定义 在 一 个 单 色 框架 缓冲 区 中 每 像素 包含 的 单 色 原 件 个 数 。 如 果 不 是 单 色 


设备 ， 则 值 等 于 0 





















orientation 4 设备 中 的 页 面 可 见 区 域 高 度 是 否 大 于 或 等 于 宽度 
Tesolution 如 : 96dpi, 300dpi, 118dpcm 

Scan 定义 电视 类 设备 的 扫描 工序 

width 定义 输出 设备 中 的 页 面 可 见 区 域 宽度 


例如 ， 设 置 设备 屏幕 宽度 小 于 500px 的 样式 : 


@media screen and (max-width: 500px) { 
样式 ; 
} 


9.2.3 ”如 何 使 用 媒体 查询 @media 


对 于 响应 式 布局 ， 即 支持 多 设备 打开 ， 需 要 我 们 考虑 到 PC、 手 机 及 iPad， 下 面 列 出 
常用 设备 的 分 辨 率 。 
常用 iPhone 和 Android 独立 设备 尺寸 如 表 9-4 所 示 。 


表 9-4 主流 iPhone 和 Android 独立 设备 尺寸 

















设备 尺 - 填 
iPhone5 320X 480 
iPhone6/ iPhone7/ iPhone8 375X 667 
iPhone6 Plus/ iPhone7 Plus/ iPhone8 Plus 414X736 
iPhone X 375X 812 
OPPO FindX 360x585 
OPPO R15 360X760 
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( 续 表 ) 








411X731 
411X731 





iPad 独立 设备 尺寸 如 表 9-5 所 示 。 
表 9-5 iPad 独立 设备 尺 十 


1024X1366 
iPad Third & Fourth Generation 768 X1024 


iPad Air 1&2 768 X1024 
768 X1024 


在 实际 开发 中 ， 为 了 能 够 适 配 大 部 分 设备 ，PC 端 界面 尺寸 一 般 为 1920X 1080， 移 动 
端 为 640X1136px，iPad 为 1024 X 1366px。 
9-7 和 9-8 中 ， 是 同一 个 网 页 在 不 同 设备 上 的 显示 效果 。 








图 9-7 ”媒体 查询 实例 (PC 端 ) 9-8 ”媒体 查询 实例 (移动 端 ) 


PC 端 代码 如 下 : 


<IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<meta name="viewport" content—"width=device-width, initial-scale=1.0"/> 
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<style> 

body { font-family:"Lucida Sans", Verdana, sans-serif:} 

-main img { width:100%;} 

hl{ font-size:1.625em:} 

h2 {font-size:1.375em;} 

-header { padding:1%:background-color-#f1f1fl1:; border:1px solid #e9e9e9;} 

.menuitem {margin:4%;margin-left:0;margin-top:0:padding:4%:border-bottom: 1px solid #e9e9e9; 
cursor:pointer;} 

-main { padding:2%;} 

Tight {padding:4%:;background-color-#CDFOF6;} 

.footer {padding:1%:text-align:center:background-color-#f1f1f] ;border:1px solid #e9e9e9:; 
font-size:0.625en:} 

.gridcontainer {width:100%:;} 

.gridwrapper {overflow:hidden:;} 

.gridbox {margin-bottom:2%:margin-right: 2%:float:left:} 

.gridheader {width:100%:;} 

-gridmenu {width:23%;} 

.gridmain {width:48%;} 

.gridright {width:23%:;margin-right:0;} 
.gridfooter {width:100%:margin-bottom:0:;} 


<hl>meida 实例 </hl> 
</div> 
</div> 
<div class—"gridbox gridmenu"> 
<div class="menuitem'"> 左 边 1</div> 
<div class="menuitem"> 左 边 2</div> 
<div class="menuitem"> 左 边 3</div> 
<div class="menuitem"> 左 边 4</div> 
</div> 
<div class—"gridbox gridmain"> 
<div class="main"> 
<hl> 中 间 标 题 <hl> 
<p> 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 中 间 内 容 <p> 
<img src="img/timgl.jpg" alt="Pulpit rock" width="" height=""> 
</div> 


<h2> 右 边 部 分 1</h2> 
<p> 右 边 内 容 内 容 </p> 
<h2> 右 边 部 分 2</h2> 
<p> 右 边 内 容 内 容 </p> 
<h2> 右 边 部 分 3</h2> 
<p> 右 边 内 容 内 容 </p> 
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判断 设备 宽度 小 于 1024px 的 样式 (因为 考虑 iPad 宽度 为 1024px, 所 以 我 们 默认 宽度 小 
于 等 于 1024px 为 移动 端 ， 大 于 1024px 为 PC 端 )， 加 入 媒体 查询 样式 @media 的 代码 如 下 : 


@media only screen and (max-width: 1024px) {/* 当 设备 宽度 最 大 为 1024px 的 时 候 */ 
.gridmenu { width:10096:} 
-menuitem { margin:1%:padding:1%:} 
.gridmain {width:100%;} 
.main { padding:196:} 
.gridright { width:100%;} 
-Tight { padding:1%; } 
-gridbox { margin-right:0;float:left; } 
} 


打开 浏览 器 调 到 移动 调试 模式 下 , 效果 如 图 9-8 所 示 , 此 刻 iPad 设备 下 也 是 此 种 效果 。 
媒体 查询 @media 即 可 通过 对 不 同 设备 类 型 进行 不 同样 式 的 控制 。 


9.3 了 解 em 和 rem 甲 位 


大 家 知道 px(pixeD) 像 素 是 长 度 单位 ,是 相对 于 显示 器 屏幕 分 辩 率 而 言 的 。 用 px 设置 字 
体 大 小 时 ， 比 较 稳定 和 精确 。 但 是 这 种 方法 存在 一 个 问题 ， 当 用 户 在 浏览 器 中 浏览 我 们 制 
作 的 Web 页 面 时 ， 如 果 去 缩放 浏览 器 ， 会 使 Web 页 面 布局 被 打破 。 这 对 于 网 站 的 可 用 性 
及 美观 度 来 说 ， 无 疑 是 一 个 非常 大 的 问题 。 因 此 ， 人 们 就 提出 了 使 用 “em” 和 “rem” 
定义 Web 页 面 字体 的 想法 。 


9.3.1 em 


em 是 相对 长 度 单位 , 相对 于 当前 对 象 内 文本 的 字体 尺寸 。 若 当 前 行内 文本 的 字体 尺寸 
未 被 人 为 设置 ， 则 相对 于 浏览 器 的 默认 字体 尺寸 。 注 意 ，px 是 相对 显示 器 屏幕 ，em 是 相 
对 于 当前 对 象 。 比 如 有 一 对 标签 <p></p>， 其 样式 设置 如 下 。 

p{ 

font-size:12px; 

padding:lem; 

中 
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这 里 padding 的 宽度 就 是 相对 于 p 元 素 font-size 的 大 小 , 也 就 是 12px; 若是 没有 定义 ， 
那 就 会 依据 浏览 器 的 默认 字体 大 小 ， 浏 览 器 默认 字体 大 小 为 16px， 即 lem=16px。 


六/ 证 
| 任意 浏览 器 的 默认 字体 高 都 是 16px。 所 有 未 经 调整 的 浏览 器 都 符合 lem=16px。 那 
| 么 12px=0.75em.10px=0.625em。 为 了 简化 font-size 的 换算 ， 需 要 在 CSS 中 的 body 选 择 器 | 


| 中 声明 Font-size=62.5%， 这 就 使 em 值 变 为 16px X62.5%=10px, 这 样 12px=1.2em,10px= | 
i lem, 也 就 是 说 只 需要 将 原来 的 px 数值 除 以 10， 然 后 换 上 em 作为 单位 就 行 了 。 

| 所 以 大 家 在 写 CSS 的 时 候 ， 需 要 注意 三 点 : 

| 1. body 选择 器 中 声明 Font-size=62.5%; 

| ”2. 将 原来 的 px 数值 除 以 10， 然 后 换 上 em 作为 单位 ; 

\ 3. 重新 计算 那些 被 放大 的 字体 的 em 数值。 避免 出 现 字 体 大 小 的 重复 声明 。 


rem 是 CSS3 新 增 的 一 个 相对 单位 (root em， 根 em)， 那 么 与 em 有 什么 区 别 呢 ? 区 别 
在 于 使 用 rem 为 元 素 设 定 字体 大 小 时 ， 虽 仍然 是 相对 大 小 ， 但 相对 的 却 是 HTML 根 元 素 。 
目前 ， 除 了 正 8 及 更 早 版 本 外 ， 所 有 主流 浏览 器 均 支 持 rem; 它们 之 间 有 很 多 相似 之 处 ， 
只 不 过 计算 的 规则 是 一 个 依赖 根 元 素 ， 另 一 个 依赖 父 元 素 。 二 者 都 是 相对 单位 ，rem 最 大 
的 优点 是 能 够 等 比例 适 配 所 有 屏幕 。CSS 代码 如 下 。 

html{ 


这 里 的 btn 的 宽 就 为 6X20px=120px, 高 为 60px。 这 是 根据 根 元 素 HTML 计算 出 来 的 ， 
即 lrem 等 于 根 元 素 字体 的 大 小 。 

为 什么 说 rem 可 以 等 比 适 应 所 有 设备 呢 ? 我 们 以 宽度 为 640px 的 设备 做 的 设计 图 为 
例 ， 如 果实 际 匹 配 的 移动 设备 是 384px， 也 就 是 实际 的 设备 是 预 设 设备 的 384/640=0.6 倍 ， 
大 家 知道 rem 是 根据 HTML 根 元 素 去 计算 的 , 假设 我 们 设置 的 HTML 的 font-size 为 20px， 
font-size 也 会 是 预 设 设备 的 0.6 倍 ， 那 么 实际 的 font-size 为 20X 0.6=12px。 在 不 同 设备 上 
的 宽度 也 是 这 样 计算 的 。 

为 了 浏览 器 的 兼容 性 ， 可 以 px 和 rem 一 起 使 用 ， 用 px 来 实现 正 6-IE8 的 效果 ， 使 用 
rem 来 实现 浏览 器 的 效果 。 
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9.4 应 用 DIV+CSS 设计 商业 网 站 ( 稳 动 端 ) 


在 第 八 单元 , 大 家 应 用 DIV+CSS 做 出 了 优 客商 城 这 款 在 PC 端 显示 的 商业 网 站 ,如 图 
9-9 所 示 。 如 今 ， 随 着 移动 设备 的 普及 ， 移 动 互联 的 应 用 占 比 越 来 越 高 ， 那 么 如 何 把 优 客 
商城 这 款 PC 端的 商业 网 站 完美 地 展示 在 移动 端 来 供用 户 去 随时 浏览 呢 ? 这 时 ， 我 们 只 需 
要 做 好 PC 端 到 移动 端的 适 配 就 好 了 。 同 样 ， 还 以 优 客 商城 为 例 ， 移 动 端的 适 配 效果 如 图 
9-10 所 示 ， 由 于 版 幅 原因 ， 同 样 只 展示 部 分 效果 。 


及 帘 空 六 桂 空 辐 油 偶 用 次 村 椒 法 兰 城 借入 
禄 女 村 二 石 于 色 扣 男 耽 区 色 相 管 条 





图 99 ”PC 端 显示 效果 图 9-10 移动 详 显 示 效 果 


通过 结构 布局 大 家 可 以 分 析出 ， 整 个 页 面 分 为 搜索 
栏 、 底 部 固定 导航 、 主 要 内 容 和 内 容 底部 这 些 部 分 ， 如 ee | 
图 9-11 所 示 。 

移动 设备 分 为 平板 电脑 和 手机 等 ， 为 了 适 配 大 部 分 
iPad， 一 般 把 宽度 设 为 1024px。 同 样 地 ， 为 了 适 配 大 部 
分 手机 ， 一 般 把 宽度 设 为 640px。 那 么 假设 设备 宽度 小 
于 等 于 1024px 就 默认 为 移动 端 ， 大 于 1024px 的 为 PC 
端 ,为 了 方便 , 我 们 就 直接 在 单元 八 的 CSS 文件 中 定义 。 

@media only screen and (max-width:1024px ) { 

族 这 里 写 移动 端 样式 */ 

1 
由 移动 端 布局 和 PC 端 布局 对 比 ， 可 以 把 移动 端 不 
需要 展示 的 元 素 隐藏 掉 。 

@media only screen and (max-width:1024px ) { 


.headtoparea,.gowuche,.navlist,.BayWindow,.vanclOthers,.last{ [| 
display: none;} 


} 图 9-11 结构 布局 图 
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移动 设备 宽度 是 不 固定 的 ， 但 都 小 于 1200px， 那 么 可 以 把 网 页 固定 宽度 由 1200px 全 部 
改 为 100% 去 适应 移动 设备 。 在 进行 移动 端 开发 时 ， 最 大 宽度 最 好 用 百分比 设置 ,能 够 自 适 
应 设备 。 


.vanclhaad, .content,.vanclimg,.miaosha_contoiner,.vanclFoot,.subFooter, 


b 

人 # 注 释 : box-sizing:border-box; 可 使 浏览 器 呈现 出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 

入 框 中 。*/ 

大 家 发 现 移动 端的 搜索 栏 宽度 是 通栏 显示 的 ， 那 么 就 需要 把 宽度 按照 百分比 设 为 
100%， 同 时 把 父 元 素 的 宽度 也 改 为 100%，input 框 设 为 100%。 

.searcharea, .search{ 

width:100%:; 

padding: 0; 

b 

.searchText{ 

width: 100%; 

box-sizing: border-box; 

padding-left:5px ; 

} 

搜索 栏 效果 如 图 9-12 所 示 。 


搜 “ 水 柔 棉 ”， 体 验 与 众 不 同 
图 9-12 搜索 栏 


可 以 看 到 项 部 有 块 空白 区 域 ， 检 查 一 下 ， 发 现 搜索 栏 的 最 大 的 DIV 设置 了 margin 值 ， 
需要 归 0， 代 码 如 下 。 效 果 如 图 9-13 所 示 。 
.vanclsearch {margin: 0; } 








[ 扯 " 水 机”， 作 只 与 人 不 同 
热门 搜索 “ 免 通 衬衫 水 水 棉 蓄 本 能 麻 衬衫 帆 布鞋 运动 户外 宗 


图 9-13 ”去除 margin 后 的 搜索 栏 
“热门 搜索 ”设置 了 固定 值 ， 需 要 修改 为 自 适 应 ， 代 码 如 下 。 效 果 如 图 9-14 所 示 。 
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所“ 水 柔 析 ”， 体验 与 众 不 同 
热门 搂 索 免 旨 衬衫 水 条 棉 荐 本 散 麻 宰 衫 帜 布鞋 运动 户外 


守 居 
图 9-14 自 适 应 的 搜索 栏 


接 下 来 设置 全 局 图 片 宽度 ， 此 网 页 img 宽度 都 可 以 等 于 父 元 素 宽度 ， 首 先 设置 所 有 的 
图 片 宽度 自 适应 他 的 父 元 素 宽 度 ， 这 样 他 的 父 元 素 有 多 宽 ， 图 片 就 会 有 多 宽 。 一 般 情 况 下 ， 
图 片 高 度 不 设置 ， 这 样 方便 图 片 根据 自己 的 宽度 而 等 比 缩小 或 放大 ， 不 会 导致 图 片 变形 。 
设置 图 片 的 宽度 为 100%， 即 填充 整个 父 元 素 。 

img{width: 100%;} 

刷新 页 面 ， 得 到 如 图 9-15 所 示 的 效果 。 

发 现 页 面 仍 有 横向 滚动 条 ， 因 为 移动 端 页 面 宽度 是 远 小 于 PC 端 宽度 的 ， 页 面 是 为 PC 
端 设计 的 ， 所 以 需要 让 每 一 部 分 宽度 自 适 应 。 这 里 用 的 局 无 序列 表 ， 因 此 需要 设置 1i 的 宽 
度 ， 调 成 百分比 为 46%， 为 了 防止 受到 前 面 样式 的 影响 ， 因 此 需要 添加 优先 级 。 效 果 如 图 
9-16 所 示 。 


.miaosha_container ul{ 
width: auto; 

. 

.miaosha_container ul li{ 
width: 46% !important; 


月 放空 滑 镑 衬 乱 溢 祝 。 几 喜 林 恬 过 兰 城 各 20 
5 女人 办 和 灰色 名 笔 条 


wi26 FE63i viss nmE79 


Ram emt zt Re | 
¥126 殉 夺 后 63 元 wl58 汪 < 
图 9-15 未 设置 五 宽度 自 适应 图 9-16 设置 宽度 自 适应 
由 于 样式 共用 ， 发 现 到 新 品 预 售 这 部 分 都 已 经 基本 完成 。 下 面 解决 优选 推荐 部 分 ， 如 


图 9-17 所 示 。 
下 面 我 们 设置 优选 推荐 部 分 的 图 片 宽 为 100%， 并 且 文 字 介绍 分 为 上 下 两 行 显示 ; 上 
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一 章 的 CSS 布局 用 了 定位 ， 为 了 减少 代码 改动 ， 在 此 仍然 使 用 定位 。 代 码 如 下 


-Ww3center,.w3left,.w3right{ 
width: 100%%; 
margin: 0; 
} 
-Tightw3{ 
left:10px; 
position: relative; 
可 以 看 到 优选 推荐 这 一 部 分 已 经 达到 预想 的 效果 ， 如 图 9-18 所 示 。 





图 9-17 未 设置 优选 推荐 自 适 应 图 9-18 设置 优选 推荐 自 适应 


下 面 看 到 主体 底部 区 域 ， 大 家 发 现 主体 底部 区 域 呈 竖 状 排列 ， 如 图 9-19 所 示 ， 需 要 让 
其 横向 显示 ， 检 查 发 现 这 里 设置 了 固定 的 宽度 ， 则 调整 为 自 适 应 ， 并 左 浮动 ， 同 时 给 图 标 
一 个 合适 的 宽 高 。 代 码 如 下 : 

.vanclCustomer ul li{ 

width: 33%; 

float: left: 

height: 70px; 

} 

.twocode img{ 

width: 68px !important: 

height: 68px !important;} 
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页 面 已 经 基本 完成 ， 还 需要 一 个 底部 固定 导航 。 大 家 已 经 会 制作 菜单 栏 了 ， 底 部 图 片 
素材 如 图 9-20 所 示 ， 这 里 只 需 加 上 一 个 固定 定位 。 由 于 固定 定位 是 相对 于 浏览 器 的 ， 为 了 
完整 显示 整个 页 面 ， 底 部 导航 需要 一 定 空白 ， 需 要 为 footer 设置 一 个 上 边 距 。 代 码 如 下 : 


扫 亿 下 载 尼 若 窜 户 端 


喇 Do 果 条 六 区 入 8 日 训 5> 尝 Do 有 攻关 入 8 日 六 5> 


图 9-19 未 设置 底部 图 9-20 底部 素材 


<!-- 移 动 端 底部 导航 栏 -> 

<div class="navclear"> 

<a href="#"><span class="nav-home-active"></span></a> 

<a href="#"><span class="nav-search"></span></a> 

<a href="#"><span class="nav-Tshirt"></span></a> 

<a href="#"><span class="nav-shopcart"></span> <i class="goods-num">0</i> </a> 
<a href=""><span id="nav-me" class="nav-me"></span></a> 

</div> 

让 底部 导航 栏 */ 
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url(../img/navBgimgNew.png); 
background-repeat: no-repeat; 
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网 站 已 经 制作 完成 ， 最 后 用 CSS 做 一 个 特效 ， 大 家 浏览 一 些 商业 网 站 时 ， 搜 索 框 中 只 
有 输入 了 内 容 ， 搜 索 按 钮 才 会 显示 。 为 了 实现 这 种 效果 ， 首 先 让 搜索 按钮 隐藏 ， 当 输入 内 
容 时 ， 就 让 搜索 框 宽 度 变 窗 ， 并 让 搜索 按钮 显示 。 这 里 用 到 了 input 的 验证 valid， 需 要 在 
input 的 dom 元 素 中 加 上 required="required"， 代 码 如 下 : 


.searchBtn{ 
display: none;/* 默 认 搜索 按钮 隐藏 */ 
b 
.searchText:valid{ 
width: 81%;/* 有 内 容 时 候 搜索 框 的 宽 由 之 前 的 100% 变 成 81%; 
} 
.searchText:valid + .searchBtn {display: block;}/* 有 内 容 时 让 搜索 按钮 显示 */ 
<input type="text" class="searchText fl" required="required" placeholder=" 搜 “水 柔 棉 ”， 体 验 与 众 不 同 " 
defaultkey=" 水 柔 棉 " a ete="ofP'> 


移动 端 网 站 已 经 全 部 制作 完成 。 整 个 样式 代码 如 下 : 


族 移 动 端 */ 

@media only screen and (max-width:1024px ) { 
必 把 不 需要 的 先 隐 藏 */ 
.headtoparea,.gowuche,.navlist,.BayWindow,.vanclOthers,.last {display: none:} 











使 用 HTML 设 计 商 业 网 站 


.searchText:valid + .searchBtn {display: block:} 


.Ww3center,.w3left,.w3right{ 
width: 100%; 
margin: 0; 


} 
Tightw3{ 


width: 33%; 
float: left: 
height: 70px; 
.twocode img{ 
width: 68px !important:; 
height: 68px !important; 


几 
族 底 部 导航 栏 */ 
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【单元 小 结 】 


e 移动 端 网 页 布局 中 可 以 灵活 使 用 rem，em，px 单位 。 
。 学 会 用 媒体 查询 做 响应 式 布局 。 
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【单元 自 测 】 


1. .rem 单位 是 相对 于 (  ) 的 单位 。 
A. html B. 父 元 素 
C. 当前 对 象 内 文本 D. 浏览 器 
2. 浏览 器 的 默认 字体 为 ( )px。 
A. 12px B. 14pxt 
C. 16px D. 18px 


3. 下 列 (  ) 是 使 设备 宽度 最 大 为 750px。 
A. @media only screen and (max-width:750px ) 他 
B. @media only screen and (min-width:750px ) {} 
C. @media only screen and (min-width:749px ) 全 
D. @media only screen and (max-width:749px ) {} 


【上 机 实战 】 


上 机 目标 


e 使 用 CSS+DIV 实现 移动 端 网 页 布局 
上 机 练习 


依 第 一 阶段 多 


练习 1: 使 用 基本 的 HTML 标签 制作 网 页 


【问题 描述 】 

1. 需要 实现 的 新 闻 列 表 页 如 图 9-21 所 示 。 
2. 尽量 使 用 rem 单位 。 

3. 最 大 宽度 为 1024px。 


【问题 分 析 】 
该 网 页 为 移动 端 页 面 ， 最 大 宽度 为 1024px。 整 个 页 面 明显 分 为 上 、 下 两 部 分 ， 上 面部 分 
是 一 个 导航 栏 ， 下 面部 分 是 一 个 图 片 加 上 列表 。 可 以 先 设置 布局 ， 后 调整 细节 。 


【参考 步骤】 
(1) 新 建 一 个 Web 项 目 ， 如 图 9-22 所 示 ， 将 所 需 的 图 片 全 部 复制 到 img 文件 天 下 ， 在 
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css 文件 夹 下 添加 index.css 文件 ， 在 index.html 文件 中 引入 css 文件 。 


国内 BF 社会 
视 规 。 图片 Ea 








图 9-21 需要 实现 新 闻 列 表 图 9-22 新 建 web 项 目 


(2) 按 上 中 下 结构 设计 index.html 页 面 的 内 容 代 码 如 下 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0， 
maximum-scale=].0,minimum-scale=1.0"> 
<meta charset="utf-8" /> 
<link rel="stylesheet" href="css/css.css" /> 
<title></title> 
</head> 
<body> 
<div class="contanner"> 
<!- 头 部 导航 start--> 
<header> 
<nav class="topnav_nav"> 
opnav_item " hre 人 ="#"><span class="topnav_s"> 国 内 </span></a> 
opnav_item " hre 人 ="#"><span class="topnav_s"> 国 际 </span></a> 
opnav_item " hre 人 ="#"><span class="topnav_s"> 社 会 </span></a> 
opnav_item " hre 伍 "#"><span class="topnav_s"> 军 迷 圈 </span></a> 
<a class="topnav_item topnav_btn" hre 全 "javascript::"><span class="topnav_s"> 收 起 
</span></a> 
</nav> 
<nav class="topnav_nav"> 
<a class="topnav_item " hre 人 ="#"><span class="topnav_s"> 视 频 </span></a> 
<a class="topnav_item " hre 人 ="#"><span class="topnav_s"> 图 片 </span></a> 
<a class="topnav_item " hre 人 ="#"><span class="topnav_s"> 话 题 </span></a> 
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<a class="topnav_item " hre 人 ="#"><span class="topnav_s"> 时 事 外 参 </span></a> 
<a class="topnav_item " hre="#"><span class="topnav_s"> 滚 动 </span></a> 
</nav> 
</header> 
<!-- 头 部 导航 end--> 
<!- 图 片 和 列表 start--> 
<section> 
<div class="s_card"> 
<L- 图 片 部 分 start--> 
<div class="banner"> 
<img src= "image/banner.jpg" /> 
</div> 
<!-- 图 片 部 分 end--> 
<a class="m f a" href="#" stickid=""> 
<div class="m f div"> 
<img data-direct="true" src="image/1.jpg" class="img_width finpic" alt=" 森 山大 道 的 巴 
黎 : 除了 是 年 少时 的 梦想 ， 更 多 是 失败 的 经 历 "> 
</div> 
<div class="m f con"> 
<h2 class="m f con_t"> 森 山大 道 的 巴黎 除了 是 年 少时 的 梦想 ， 更 多 是 失败 的 经 历 
</h2> 
<div> <span class="cm_mark cm_mark 1"> 专 题 </span> </div> 
</div> 
<div class="clear"></div> 
</a> 
<a class="m f a" href="#" stickid=""> 
<div class="m f div"> 
<img data-direct="true" src="image/2.jpg" class="img width finpic" alt=" 
32 名 青年 汉学 家 “毕业 ”， 学 员 归 国 后 将 继续 传播 中 国文 化 "> 
<div> 
<div class="m f con"> 
<h2 class="m f con_t">32 名 青年 汉学 家 “毕业 ”， 学 员 归 国 后 将 继 
续 传 播 中 国文 化 </h2> 
<div> <span class="cm_ mark cm _ mark 1"> 专 题 </span> </div> 
</div> 
<div class="clear"></div> 
</a> 
<a class="m f a" href="#" stickid=""> 
<div class="m f div"> 
<img data-direct="true" src="image/3.jpg" class="img width finpic" alt=" 
问答 | 小 龙虾 怎么 吃 ? 营养 科 医生 这 样 建议 ! "> 
</div> 


<h2 class="m f con t"> 问 答 | 小 龙虾 怎么 吃 ? 营养 科 医 生 这 样 建议 ! <h2> 
<div class="cm f£ ic"> 
<span class="icon_ com"></span> 
<span class="m f con com n"></span> 
<cite class="m_f con_add"> 环 球 网 </cite> 
</div> 


</div> 
<div class="clear"></div> 
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</a> 
<a class="m f a" href—"#" stickid=""> 
<div class="m f div> 
<img data-direct="true" src="image/4.jpg" class= "img width finpic" alt=" 
2018FIRST 青年 电影 展 : 让 自己 的 脑子 天 马 行 空 起 来 "> 
<div> 
<div class="m f con"> 
<h2 class="m f con t">2018FIRST 青年 电影 展 : 让 自己 的 脑子 天 马 行 空 起 来 </h2> 
<div class="cm f£ ic"> 
<span class="icon com"></span> 
<span class="m f con com n"></span> 
<cite class="m f con add"> 参 考 消息 </cite> 
</div> 
</div> 
<div class="clear"></div> 
</a> 
<a class="m f a" href="#" stickid=""> 
<div class="m f div"> 
<img data-direct="true" src="image/6.jpg" class="img width finpic" alt=" 
专访 | 梅 婷 : 跟 孩 子 在 一 起 的 时 候 ， 放 下 手机 "> 


<h2 class="m f con t"> 专 访 | 梅 婷 ， 跟 孩子 在 一 起 的 时 候 ， 放 下 手机 </h2> 
<div class="cm f ic"> 
<span class="icon_ com'"></span> 
<span class="m f con com n">27</span> 
<cite class="m_f con_add"> 澎 涯 网 </cite> 
</div> 
</div> 
<div class="clear"></div> 
</a> 
</div> 
<p class="theEnd"> 已 经 到 底 了 ...</p> 
</section> 
<!-- 图 片 列表 end--> 
</div> 
</body> 
</html> 


(3) 调整 css 文件 ， 初 始 化 css 样式 ， 将 标签 的 margin 和 padding 设置 为 0。 设置 最 大 
宽度 为 1024px， 并 将 网 页 居中 ， 设 置 根 字 体 为 10px， 方 便 后 面 使 用 rem 单位 。 


人 # 样 式 初始 化 所 
body,div.dl,dt.dd,ul,ol.li,h1,h2.,h3,h4,h5,h6,form,input.textarea,p,th,td,html,a,ul.li,ol,section,header,footer, 


a {text-decoration: none;color: #333;} 
ul li,ol li {list-style-type: none:} 











使 用 HTML 设 计 商 业 网 站 


input {font-family: inherit:font-size: inherit:font-weight: inherit:} 

html,body {width: 10096:height: 100%:font-family: "微软 雅 黑 ";color: #333:background: #ffEdisplay: 
block:max-width: 1024px:marsgin: auto:overflow-x: hidden:} 

html {font-size: 10px;} 


(4) 设置 总 体 样 式 和 上 面 导航 栏 部 分 ， 导 航 栏 部 分 背景 是 渐变 色 ，background: 
-webkit-linear-gradient(S0deg,#838dfb,#8191f8 10%,#4fa2f1 50%,#1eabf6). 


} 
(5) 设置 图 片 以 及 下 面 列表 


.banner { 
width: 100%; 
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margin: 0.Srem 0; 
border-bottom: 1px solid #e4e4e4:; 
padding: 0.4rem 0: 

mfdivt{ 


border: 1px solid #fe362c; 
margin: 0.Srem 
; 
.icon com { 
background: url(../image/icon.png) 0 0 no-repeat: 
display: block:; 
width: 1.2rem: 
height: 1.2rem; 
float: left; 
position: relative; 
top: 0.2rem; 
background-size: 100% 100%%; 
-cm f ic{ 
color: #888; 
font-size: 1.2rem:; 
Position: absolute: 
bottom: 0.2rem:; 


mfconntf 











使 用 HTML 设 计 商 业 网 站 


} 
(5) 运行 网 页 ， 结 果 如 图 9-21 所 示 。 


令 第 二 阶段 多 


练习 2: 使 用 CSS+DIV 实现 移动 端 布局 


【问题 描述 】 

1. 根据 设计 图 实现 移动 端 页 面 。 注 : 最 大 
宽度 为 1024px。 

2. 需要 实现 的 频道 页 面 如 图 9-23 所 示 。 


+ 


NE 


图 9-23 需要 实现 的 频道 页 面 


Q 
心 
nn 
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【拓展 作业 】 


实现 如 图 9-24 所 示 的 “我 的 博客 ”页 面 ， 最 大 宽度 为 1024px。 


在 互联 网 圈 混 ,怎么 能 不 知道 这 9 个 Java 方 向 
公众 号 
三 序 人 生 06 月 04 日 


在 IT 图 混 ， 怎么 能 不 知道 这 些 公众 号 ? 
屋 订 人生 06 有 4 日 


wR 0 有 A139 


程序 员 如 何在 百 忙 之 中 不 走 岔路 ， 不 白 忙 ! 


9-24 ” 需 实现 的 页 面 





